Css背景和渐变属性有哪些
Css背景和渐变属性有哪些
本文小编为大家详细介绍“Css背景和渐变属性有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“Css背景和渐变属性有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
1.背景绘制区域
background-clip
设置背景显示区域
属性：background-clip
值：border-box：背景被裁剪到边框，默认值
padding-box：背景被裁减到内边距框(忽略内边距)
content-box：背景被裁减到内容框上(只显示内容区域)
2.背景的定位区域
背景从哪开始画
属性：background-origin
取值：border-box：从边框开始画
padding-box：从内边距处开始画
content-box：从内容区域上开始画
3.背景合并
属性：background:
background：color url() repeat attachment position;
常用方式:
background：url repeat position;
background：url(images/1.jpg) no-repeat -15px 20px;
background-image：url();
background-repeat：no-repeat;
background-position：-15px 20px;
background：red;
background：url(1.jpg);
渐变
多个颜色值之间平缓过度
渐变分类：
1、线性渐变
2、径向渐变
3、重复渐变
注意：
所有的渐变，都是通过 background-image 进行设置
线性渐变：linear-gradient
径向渐变：radial-gradient
重复线性：repeating-linear-gradient
重复径向：repeating-radial-gradient
background-image:linear-gradient();
1、线性渐变
linear-gradient(angle,color-point1,color-point2,...)
angle:
取值范围有：关键词：to top ,to bottom ,to right ,
角度： 0deg --> to top
90deg -->to right
180deg --> to bottom
color-point：渐变颜色的开始点、中间过渡点、结束点
取值范围有：
red 0%：从开始处显示红色
green 50%： 到 50% 位置处 ，变成绿色
blue 100% ： 到结尾处，变为蓝色
2、径向渐变
radial-gradient([size at position,]color-point1,color-point2, ....)
size at position：size即放射的圆形的半径 position即原点所在坐标
left top bottom right center
3、重复渐变
background-image：repeating-linear-gradient(to bottom,red 0,green 10px)；
4、浏览器兼容性
对不支持的版本，通过前缀
Firefox： -moz-
Chrome,Safar： -webkit-
Opera ：-o-
background-image：-webkit-linear-gradient(to bottom,red,green); Chrome Safari
background-image：-o-linear-gradient(to bottom,red,green); Opera
background-image：-moz-linear-gradient(to bottom,red,green); Firefox
读到这里，这篇“Css背景和渐变属性有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注恰卡编程网行业资讯频道。
