CSS3學習筆記 14 文字效果

2021-08-07 14:29:17 字數 1504 閱讀 3394

本節學習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的換行...