提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
使用CSS3的背景渐变 -webkit-gradient,用一个背景渐变的DIV代替图片。
要实现盒子背景颜色的渐变效果,常见的一般有三种,线性渐变 (linear gradient)、重复线性渐变(repeating-linear-gradient)、径向渐变(radial-gradient)
一、线性渐变
通过linear-gradient来这样定义一个线性渐变
background-image: linear-gradient( 方向/角度 , 颜色1,颜色2,颜色3....);
从上到下
例如:
background-image: linear-gradient(#ff0000,#f794ce, #03fbe2);
从下到上
例如:
background-image: linear-gradient(#03fbe2,#f794ce, #ff0000);
从左到右
例如:
background-image: linear-gradient(to right, #03fbe2,#f794ce, #ff0000);
从右到左
例如:
background-image:linear-gradient(to left,#03fbe2,#f794ce,#ff0000);
从左上到右下
可以使用多个关键词,例如to bottom right,表示从左上到右下
background-image: linear-gradient(to bottom right, #03fbe2,#f794ce, #ff0000);
从右上到左下
例如:
background-image: linear-gradient(to bottom left, #03fbe2,#f794ce, #ff0000);
使用角度来定义方向
除了使用关键词to + 方向名词外,我们还可以使用角度来任意定一个方向
一个平面上的角度只有360度,也就是一个圆,使用角度来定义任意一个方向,值 0deg 等于向上(to top),值 90deg 等于向右(to right),值 180deg 等于向下(to bottom)。
例如:
background-image: linear-gradient(45deg, #03fbe2,#f794ce, #ff0000);
表示从起点从225度到45度结束的渐变
平铺的线性渐变
当然,颜色也可以用rgb模式,这样就可以使用透明度了!
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
二、径向渐变
1.径向渐变就是从中心开始向四周扩散。
我们通过 radial-gradient();来定义一个径向的渐变。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
position:
left right center
top center bottom
X、Y轴
shape:
circle 圆形
elipse 椭圆 默认值
size:
closest-side 渐变到最近边
farthest-side 渐变到最远边
closest-corner 渐变到最近角
farthest-corner 渐变到最远角
总结
例如:以上就是今天要讲的内容,本文仅仅简单介绍了CSS渐变背景的使用方法。