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圆心的位置 内部颜色 外部颜色*/效果如下：
(adsbygoogle = window.adsbygoogle || []).push({});本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-11-08)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
