CSS渐变详解-CSDN博客

本文链接：https://blog.csdn.net/fjxcsdn/article/details/86660095

一、什么是渐变

多种颜色平缓变化的一种显示效果

如图所示

色标：一种颜色及其出现的位置。一个渐变是由多个色标组成(至少两个)

**线性渐变**
属性	background
取值	linear-gradient(angle,color-point1,color-point2,...);

**angle：表示渐变填充的方向或角度**
关键字	to top：从下向上填充渐变色 to right：从左向右填充渐变色 to bottom：从上向下填充渐变色 to left：从右向左填充渐变色
角度值	0deg：从下向上填充渐变色等同于 to top 90deg：从左向右填充渐变色等同于 to right 180deg：从上向下填充渐变色等同于 to bottom 270deg：从右向左填充渐变色等用于 to left

**color-point 色标：颜色及其位置**
取值	颜色以及位置的组合，中间用空格隔开

效果展示：

各浏览器的新版本都支持渐变属性——对于不支持的浏览器版本，可以通过增加浏览器前缀的方式，让浏览器支持渐变

（火狐）Firefox : -moz-	background:-moz-linear-gradient(0deg,red,blue);
（谷歌）Chrome & Safari : -webkit-	background:-webkit-linear-gradient(0deg,red,blue);
Opera : -o-	background:-o-linear-gradient(0deg,red,blue);
IE : -ms-	background:-ms-linear-gradient(0deg,red,blue);

CSS的渐变性就先分享到这里，如果本篇博客对您的学习有所帮助，记得点个赞哦！