w3h5

CSS3中元素背景的 gradient 渐变属性

前段时间我写过一篇:CSS中background属性总结 整理了background的常用属性。

在CSS3中 background-image 还有一个 gradient 属性——渐变。

渐变大体分两种:
1、线性渐变:linear-gradient

线性渐变的用法是:linear-gradient(direction方向/角度,color1,color2......);

单向渐变:从一个水平或者垂直方向到另一个方向

background-image: linear-gradient(to right,red,blue); /*从左到右 由红到蓝渐变*/

效果如下:


单向渐变:从一个角到另一个相对的角

background-image: linear-gradient(to right top,red,blue); /*从左下角到右上角*/

效果如下:


多色渐变:可以有多个颜色的值

background-image: linear-gradient(to right top,red,orange,yellow,green,cyan,blue,purple); /*从左下到右上 颜色。。。*/

效果如下:


重复渐变:两种颜色重复渐变

background-image: repeating-linear-gradient(to left,black 30px,white 60px); /*从右向左渐变,黑色渐变30px,白色从30px开始到60px,总共占60px,重复出现,后面的值要比前面的大。*/

效果如下:


角度渐变:渐变倾斜的角度

background-image: linear-gradient(45deg,white,blue); /*角度45度 由白到蓝*/

效果如下:


2、径向渐变:radial-gradient

径向渐变:radial-gradient(shape形状,color1,color2......);

径向渐变的形状有2种:ellipse椭圆形(默认);和circle圆形;

圆形渐变:

background-image: radial-gradient(circle,white,blue); /*形状:圆形 内部颜色 外部颜色*/

效果如下:


可以设置圆心位置:

background-image: radial-gradient(circle at left bottom,white,blue); /*形状:圆形 at left bottom圆心的位置 内部颜色 外部颜色*/

效果如下:


赞 (0)
分享到: +More |

评论 沙发

换个身份