CSS3之背景渐变
在没有 CSS3的时候,如果想做一个背景渐变效果,就得使用一个很细的渐变切片进行水
平/垂直平铺。对于使用图片而言,这确实是一种很好的折中方案。一张仅有一两像素宽
的图片,不会给宽带造成太大负担,而且它可以用在网站的多个元素上。
1 aside { 2 border-right-color: #e8e8e8; 3 border-right-style: solid; 4 border-right-width: 2px; 5 margin-top: 58px; 6 padding-left: 1.5%; 7 padding-right: 1.0416667%; 8 margin-left: 1.0416667%; 9 float: left; 10 width: 20.7083333%; 11 background: url(../img/sidebarBg2.png) 50% repeat-x; 12 }
这种方式当然可以做渐变效果,但是不够灵活。(如果再往下增加海报,需要重新去ps中做图了)
一、CSS3中线性渐变
1 background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
看一下线性渐变的语法
1 background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
(1)圆括号中的第一个值(即例子中的 90deg ,可选)定义了渐变的方向。不定义该值则
默认是一个垂直从顶部到底部的渐变。你还可以使用如 to top right 这样的值,这
会产生一个朝向右上角的对角线渐变。
(2) 下一个值(例子中的 #ffffff 0% )定义的是渐变的“起点”,包括起点的颜色和位置。
你也可以使用像 blue 20% 这样的值,这样就是从蓝色开始渐变到下一个颜色,而渐
变开始位置则位于假想的渐变路径的 20%处。同样,起点位置也可以使用负值,这样
渐变从实际可见区域之外就开始了。比如:
background: linear-gradient(90deg, #ffffff -50%, #e4e4e4 50%, #ffffff 100%);
上面这行代码意味着渐变从可见区域之外开始,假想的渐变路径比可见区域长 50%。
(3) 下一个值指的是“过渡颜色点”。我们来回顾一下:沿着 90 度垂直方向,从白色开始
(( #ffffff 0% ),向位于渐变路径 50%处的 #e4e4e4 这个颜色(浅灰色)渐变。这里
就是渐变中的第一个过渡颜色点。如果需要的话,可以在渐变“终点”之前定义更多
的过渡颜色点(使用逗号分隔)。
(4)圆括号中的最后一个值始终是渐变的“终点”。不论在起点之后放置了多少个过渡颜色
点,最后一个值始终是终点。
二、径向背景渐变
1 background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);
三、重复渐变
1 background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
四、背景渐变图案
1 body { 2 background-color:white; 3 background-image: 4 radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), 5 repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, 6 hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, 7 transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, 8 hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, 9 transparent 50px); 10 background-size: 30px 30px, 90px 90px; 11 background-position: 0 0; 12 }