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 ;
背景:背景顏色 背景圖片 背景重復(fù) 背景位置/背景大小 背景關(guān)聯(lián)
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;//系統(tǒng)默認從padding處開始(緊貼邊框)
background-origin:content-box;//從內(nèi)容處開始(和邊框會有padding的距離)
4、background-clip:背景圖片超出修剪
background-clip:border-box;//同上超出邊框修剪
background-clip:padding-box;//超出padding
background-clip:content-box;//超出內(nèi)容
5、顏色的漸變
background:-webkit-linear-gradient(position,#fff 30%,#f00 40%,green 80%);
注:第一個屬性代表位置可使用一個top(上)或兩個left top (左上)來表示,后面參數(shù)為顏色個數(shù)不限。若不加百分比,則默認平均分配。加百分比后按照百分比分配。eg:前30%為白色且不變色。30%-40%白色逐漸變?yōu)?f00。40%-80%為#f00變?yōu)榫G色 。之后保持綠色不變。(有點繞)。
(ps:background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa));
linear 表示線性、0 0 表示開始位置的x與y的位置,0 100%表示結(jié)束的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//重點顯示行數(shù)
overflow: hidden;//超出影藏
注:若給文本高度,則會有小問題(高度給大會顯示多行高度給小則顯示行數(shù)未達到需要顯示的行數(shù))可不給文本告高度,字適應(yīng)。
3、文字陰影
text-shadow(x y r color);//分別代表x軸y軸陰影半徑和陰影顏色