css渐变(CSS渐变背景应用)

推荐整理分享css渐变(CSS渐变背景应用)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css渐变色,css渐变背景色,css渐变背景,css渐变字体,css渐变色代码,css渐变背景色,css渐变色,css渐变色代码,内容如对您有帮助，希望把文章链接给更多的朋友！

属性值：background：linear-gradient（颜色）

✍默认值：从上到下线性渐变： 

代码：

 结果：

✍ 属性延伸：

（1）改变渐变方向：

从下到上：background：linear-gradient（to top yellow,green)

从左到右：background：linear-gradient（to right yellow,green)

从右到左：background：linear-gradient（to left yellow,green)

从左上到右下：background：linear-gradient（to bottom right yellow,green)

（2）改为任意角度的渐变

属性：background：linear-gradient（50deg yellow,green)

含义是：从红色到绿色50°渐变；

0°渐变是：红色从下到上渐变为绿色；90°是从左到右；180°是从上到下；270°是从右到左

属性：background：radial-gradient（颜色值）

（1）不规则颜色渐变：background:radial-gradient (yellow 30%，orange 50%，green 80%)

代码：

 结果：

 这个百分比的含义是，拿上面的代码说明：黄色到盒子30%的位置开始渐变为橙色，30%以前不渐变都是黄色，橙色从50%的位置开始渐变为绿色，80%以后都是纯绿色。

还有一个极端一点的：background：radial-gradient（red 50%，bule 50%）

含义是：红色从50%位置开始渐变，而50%以后都是蓝色，所以从50%-50%之间没有渐变，所以两个纯色的圆，前50%是红色，后50%是蓝色。

（2）设置渐变形状

（3）改变中心点的位置和改变渐变的大小

 x轴60%，y轴40%的位置，坐标原点在左下角，，，

如果属性不好用了，可以在前面加：“-webkit-”（google浏览器特定的格式，其他浏览器可以去百度查查）

图示：

 代码：

 结果：

 代码：

 结果：

4.太极小练习：

用到“：：before”和“：：after”伪元素，和线性渐变的知识：

代码：

结果：