如何通过css3背景控制属性+使用颜色过渡实现渐变效果

小编给大家分享一下如何通过css3背景控制属性+使用颜色过渡实现渐变效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都成都餐厅设计小微创业公司专业提供成都定制网站营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

css3背景图像相关

background-clip 背景图片绘制区域

background-clip:border-box; 内容区

background-clip:padding-box; padding区域

background-clip:border-box; border区域

background-origin: content-box | padding-box | border-box; 背景图片起始位置

背景图片从border-box开始水平垂直向下偏移50px

背景图片从padding-box开始水平垂直向下偏移50px

背景图片从content-box开始水平垂直向下偏移50px

background-size: 填写数值或者百分比时，如果只填写一个值，另一个值默认为auto

cover 等比缩放填满容器

contain 等比缩放至一边碰到容器边

多重背景图片

background-image:url(),url();

前面的图片会覆盖后面的图片

颜色设置为透明：transparent

css3渐变

兼容性：IE10

正常情况下线性渐变的角度

webkit内核下线性渐变的角度

解决方法：兼容浏览器的前缀按顺序书写，正常情况下无前缀的放在最后

颜色可以具体分配位置

第一个颜色不写默认是0%的位置；最后一个颜色默认是100%的位置

rgba() 可以设置带透明色的渐变

重复渐变

repeating-linear-gradient

径向渐变 radial-gradient

保持圆形渐变

尺寸大小 closest-side closest-corner farthest-side farthest-corner

    
closest-side
    
closest-corner
    
farthest-side
    
farthest-corner

设置渐变的圆心位置

水平方向为宽度的10%，垂直方向为高度的20%

    
closest-side
    
closest-corner
    
farthest-side
    
farthest-corner

repeating-radial-gradient 重复径向渐变

IE浏览器渐变

IE10+ 支持gradient 渐变

IE6-8 使用filter

使用IE控制台可切换IE浏览器版本

IE filter

0 从左到右线性渐变

1 从上到下线性渐变

实际案例：

以上是“如何通过css3背景控制属性+使用颜色过渡实现渐变效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页名称：如何通过css3背景控制属性+使用颜色过渡实现渐变效果
本文URL：http://cdxtjz.cn/article/ihhejg.html