本節學習css3中一些文字屬性的設定。
[1]文字陰影
text-shadow: 橫向 縱向 模糊度 顏色;
可以作多重陰影疊加。
[2]文字裁剪
把溢位的部分裁剪掉,然後判斷是否加省略號。要配合其它屬性一起用。
不能換行:
white-space: nowrap;
控制溢位:
overflow: hidden;
裁剪後不新增省略號:
text-overflow: clip;
裁剪後新增省略號:
text-overflow: ellipsis;
*這兩個屬性的測試
lang="zh-cn">
css3文字效果title>
charset="utf-8">
rel="stylesheet"
type="text/css"
href="style.css">
head>
我是html5p>
html>
@charset
"utf-8";p
測試結果:
[3]文字描邊(實驗階段)
-webkit
-text
-stroke: 描邊量 顏色;
[4]文字填充(實驗階段)
-webkit
-text
-fill
-color: 填充什麼;
它單獨用起來和改變自己顏色沒什麼區別,但可以和其它css屬性搭配產生新的效果。
*這兩個屬性的測試
lang="zh-cn">
css3文字效果title>
charset="utf-8">
rel="stylesheet"
type="text/css"
href="style.css">
head>
我是html5p>
html>
@charset
"utf-8";p
測試結果:
css3文字效果
text shadow 在css3中我們可以給單調的文字加上陰影效果,賦予文字美感 text shadow h shadow v shadow blur color h shadow 必須 水平陰影的位置,允許負值 v shadow 必需 垂直陰影的位置,允許負值 blur 可選 模糊的距離 銳化陰...
CSS3文字效果
css3提供了text shadow文字陰影效果,這個屬性在之前講過,只是沒有涉及瀏覽器支援情況 opera 9.5 firefox 3.5 chrome 4 ie 10 safari 3.1 正值陰影 負值陰影 多重陰影疊加 css3提供了text overflow屬性來控制文字的溢位部分,它的作...
css3文字效果
1.text shadowcss3中,text shadow是設定文字陰影 水平陰影 垂直陰影 模糊的距離 以及陰影的顏色 給標題新增陰影 h12.text overflowcss3文字溢位屬性指定應向使用者如何顯示溢位內容 div 上面的這串 可以使溢位的文字內容以省略號 顯示 3.css3的換行...