如何通过css3背景控制属性+使用颜色过渡实现渐变效果
小编给大家分享一下如何通过css3背景控制属性+使用颜色过渡实现渐变效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观,专业网站建设服务10余年为成都成都餐厅设计小微创业公司专业提供成都定制网站营销网站建设商城网站建设手机网站建设小程序网站建设网站改版,从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。
css3背景图像相关
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
以上是“如何通过css3背景控制属性+使用颜色过渡实现渐变效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
名称栏目:如何通过css3背景控制属性+使用颜色过渡实现渐变效果
网页网址:http://scyanting.com/article/ihhejg.html