三、背景属性-文本属性

1、背景样式

 background-image:url(img/4.jpg);
background-repeat:no-repeat;
background-position:center center;
background-color:pink;
background-attachment:fixed;
background-size:cover;

符合样式写法

background: #666 url(‘images/1.jpg’)no-repeat center/cover fixed ;

背景：背景颜色 背景图片 背景重复 背景位置/背景大小 背景关联

2、多背景样式

background:url(img/1.jpg) no-repeat top left/400px auto,url(img/2.jpg) no-repeat top left/500px auto,url(img/3.jpg) no-repeat top left/600px auto;

写法如上，使用逗号，隔开

3、background-origin:背景图片起始位置

background-origin:border-box;//从边框开始放置（会被边框覆盖）
background-origin:padding-box;//系统默认从padding处开始（紧贴边框）
background-origin:content-box;//从内容处开始（和边框会有padding的距离）

4、background-clip:背景图片超出修剪

background-clip:border-box;//同上超出边框修剪
background-clip:padding-box;//超出padding
background-clip:content-box;//超出内容

5、颜色的渐变

background：-webkit-linear-gradient(position,#fff 30%,#f00 40%,green 80%);

注：第一个属性代表位置可使用一个top（上）或两个left top （左上）来表示，后面参数为颜色个数不限。若不加百分比，则默认平均分配。加百分比后按照百分比分配。eg:前30%为白色且不变色。30%-40%白色逐渐变为#f00。40%-80%为#f00变为绿色 。之后保持绿色不变。（有点绕）。

(ps:background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa));

linear 表示线性、0 0 表示开始位置的x与y的位置，0 100%表示结束的x与y位置，from(#eee)表示从这个颜色开始，to(#aaa)表示渐变到这个颜色)
注：浏览器不兼容可试试( background:-webkit-gradient(linear ,10% 10%,100% 100%,
color-stop(0,rgb(255,0,0)),
color-stop(0.5,rgb(255,255,0)),
color-stop(1,rgb(0,0,255)))
)

6、文本属性

1、文本顺序（从左到右或者从右到左）

direction：rtl;
unicode-bidi:bidi-override;//从右到左显示文字、默认从左到右这里不做例子

2、多行文本修剪

display: -webkit-box//继承block的属性
-webkit-box-ovient: vertical//元素垂直
-webkit-line-clamp: 5//重点显示行数
overflow: hidden;//超出影藏

注：若给文本高度，则会有小问题（高度给大会显示多行高度给小则显示行数未达到需要显示的行数）可不给文本告高度，字适应。

3、文字阴影

text-shadow(x y r color);//分别代表x轴y轴阴影半径和阴影颜色

注： 也可以给多个属性使用逗号隔开，可实现立体字，霓虹字等效果。