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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！