通过css3背景控制属性+使用颜色过渡实现渐变效果
css3背景图像相关
兼容性：IE9+
background-clip 背景图片绘制区域
background-clip:border-box; 内容区
Document
background-clip:padding-box; padding区域
Document
background-clip:border-box; border区域
Document
background-origin: content-box | padding-box | border-box; 背景图片起始位置
背景图片从border-box开始水平垂直向下偏移50px
Document
背景图片从padding-box开始水平垂直向下偏移50px
Document
背景图片从content-box开始水平垂直向下偏移50px
Document
background-size: 填写数值或者百分比时，如果只填写一个值，另一个值默认为auto
cover 等比缩放填满容器
contain 等比缩放至一边碰到容器边
Document
多重背景图片
background-image:url(),url();
前面的图片会覆盖后面的图片
Document
颜色设置为透明：transparent
css3渐变
兼容性：IE10
Document
正常情况下线性渐变的角度
webkit内核下线性渐变的角度
解决方法：兼容浏览器的前缀按顺序书写，正常情况下无前缀的放在最后
颜色可以具体分配位置
第一个颜色不写默认是0%的位置；最后一个颜色默认是100%的位置
Document
rgba() 可以设置带透明色的渐变
Document
重复渐变
repeating-linear-gradient
Document
径向渐变 radial-gradient
Document
保持圆形渐变
Document
尺寸大小 closest-side closest-corner farthest-side farthest-corner
Document closest-sideclosest-cornerfarthest-sidefarthest-corner
设置渐变的圆心位置
水平方向为宽度的10%，垂直方向为高度的20%
Document closest-sideclosest-cornerfarthest-sidefarthest-corner
repeating-radial-gradient 重复径向渐变
Document
IE浏览器渐变
IE10+ 支持gradient 渐变
IE6-8 使用filter
Document
使用IE控制台可切换IE浏览器版本
IE filter
0 从左到右线性渐变
1 从上到下线性渐变
实际案例：
Document
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/CSS/74546.html
