标签：css3 百分比 bottom gradient 渐变 模式 background

1、线性渐变

background：linear-gradient（渐变的方向，颜色1，颜色2）

渐变的方向：

（1）单一方向渐变

标准模式：to bottom 从上到下渐变

兼容模式：bottom 从下到上渐变

（2）对角方向渐变

标准模式：to right bottom 从左上角到右下角 

兼容模式：right bottom 从右下角到左上角

（3）角度值

标准模式的角度值

正值：顺时针

负值：逆时针

兼容模式的角度值

90deg-标准的角度值

（4）例子：一个背景两个背景色

background：linear-gradient（to top，orange 50%，pink 50%）

2、径向渐变（只有兼容模式，必须加前缀）

background：-webkit-radial-gradient（渐变的中心点，渐变的形状，渐变的大小，开始颜色，结束颜色）

渐变的形状和渐变的大小只能存在一个

（1）渐变的中心点

（i）方向：center（默认值）

水平：left right center

垂直：top bottom center

（ii）像素：px：10px 40px（水平10px，垂直40px）

（iii）百分比：%

（2）渐变的形状（默认形状跟盒子有关，受盒子影响，正方形只能是正圆）

（i）圆：circle

（ii）椭圆：ellipse

（3）渐变的大小

closest-side：最近边

closest-corner：最近角

farthest-side：最远边

fathest-corner：最远角

3、重复线性渐变

background：repeating-line-gradient（to left， color1 百分比，color2 百分比，color3 百分比）

4、重复性径向渐变

background：-webkit-repeating-radial-gradient（color1 百分比，color2 百分比，color3 百分比）

 

标签：css3,百分比,bottom,gradient,渐变,模式,background
来源： https://www.cnblogs.com/phantomyy/p/14955093.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。