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轴阴影半径和阴影颜色
网友评论