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背景和渐变属性有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网node.js频道。