border=radius :上右下左; 取值和margin很像
border-radius :60px 30px 40px 50px /40px 50px 60px 70px
如果border-radius有斜槓,左邊的就代表水平方向(X軸),右邊的代表垂直方向(Y軸)
同樣的順序需還是上右下左
border-radius:50%(超過50%) 會變成圓形
2. 文本屬性
white-space:文檔中的空白處
屬性值:noraml: 默認忽略多個空格,只輸出一個空格 .
nowrap: 強制不換行
pre:空格/縮進/換行 會給保留
pre-line:合併空表(多個空格只會輸出一個空格)
pre-warp:保留空白/縮進,正常換行 ;
3. 文本超出換行
Word-warp:允許長單詞轉換到下一行
Word-break:允許在單詞內轉行(自動換行) ..
4. 文字擺放形式
direction: 文字擺放方向
屬性值 rtl:文字往右向左擺放;
trl:(默認)文字往左向右擺放;
unicode-bidi: 文字內容倒向擺放
屬性值: bidi-override:文字從右到左;
5. 文本單行超出顯示省略號
多餘的文字先讓他隱藏 :overflow-hidden;
讓文本顯示在一行 :white-space:nowrap;
文本顯示省略號: text-overflow:ellipsis;
//必須要這三個樣式纔可以有效果
//一般使用後臺設置省略..
6.盒子陰影
box-shadow:文字陰影;
//可以有五個值 (水平偏移(X),垂直偏移(Y),擴散程度,尺寸, 顏色 ) //尺寸一般可以省略
舉例: box-shadow: 0 0 10px red; //可以是rgba,#000;
可以有多個值
舉例: box-shadow: 0 0 10px red, 0 0 10px blue;
可以有內陰影 :
舉例: box-shadow: inset 0 0 10px red;
7.文字陰影:
text-shadow:
//可以有四個值 (水平偏移(X),垂直偏移(Y),模糊度,顏色 )
舉例: text-shadow: 0 0 10px red; //可以是rgba,#000;
可以有多個值
舉例: text-shadow: 0 0 10px red,0 0 10px blue;
8.文本描邊,文字填充: //兼容性差,很少用
text-stroke:
//兩個值 (大小,顏色) 有兼容性 所以需要加兼容前綴
舉例 -webkit-text-stroke:2px,red; //谷歌
-mos-text-stroke:2px,red //火狐
text-fill-width: 描邊寬度 //理解就行
text-fill-color: 描邊顏色 //理解就行
9.轉換大小寫:
text-transform:
屬性值: none(默認) 無轉換;
capitalize:每個單詞第一個字母爲大寫;
upercase :轉換成大寫;
lowercase:轉換成小寫;