CSS3樣式。
1. 邊框
1.1 圓角效果:
border-radius: 10px /* 所有角都使用半徑為10px的圓角 /
border-radius: 5px 4px 3px 2px; / 四個半徑值分別是左上角阻肿、右上角纸泄、右下角和左下角琴庵,順時針 */
1.2邊框陰影:
box-shadow:x軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式]
1.3為邊框應(yīng)用圖片:
border-image:url(xxx.jpg) 70 70 70 repeat
![img](http://img.mukewang.com/52e2201a0001b1e004720260.jpg)
2. 顏色
2.1顏色:
color:rgba(R,G,B,A)
2.2顏色漸變:
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
![img](http://img.mukewang.com/54b72b2e0001500103790158.jpg)
3.文字與字體:
3.1 text-overflow
![img](http://img.mukewang.com/53070cc00001a5bc06000200.jpg)
(須定義強(qiáng)制文本在一行內(nèi)顯示(white-space:nowrap)及溢出內(nèi)容為隱藏(overflow:hidden)伤溉,只有這樣才能實現(xiàn)溢出文本顯示省略號的效果)
3.2 word-wrap
文本行為,當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行束倍。
![img](http://img.mukewang.com/53070cf700018a2b06000200.jpg)
3.3嵌入字體
@font-face {
font-family : 字體名稱;
src : 字體文件在服務(wù)器上的相對或絕對路徑;
}
3.4 文本陰影
text-shadow: X-Offset Y-Offset blur color;
4.背景
background-origin:border-box | padding-box | content-box;
background-clip: border-box | padding-box | content-box | no-clip
background-size: auto | <長度值> | <百分比> | cover | contain
multiple backgrounds
5.選擇器
注意事項:
border-width 不支持百分比被丧。默認(rèn)3px。