CSS 文字效果

2021-07-24 14:00:47 字數 2290 閱讀 5264

1.1、自定義字型:

這段文字使用的是徐靜蕾字型。

這段文字使用的是預設字型。

1.2、段落首字元下沉、縮排及特殊顯示

段落首字元下沉、縮排及特殊顯示

段落首字元下沉和15畫素的縮排

if -首字元不下沉、首字元英文小寫和懸掛縮排(-6畫素)

if 段落的首字元不下沉、首字母英文大寫

1.3、自定義文字選中樣式

自定義文字選中樣式

自定義文字選中樣式演示網頁

1.4、文字對齊

文字對齊

1.5、間隔與間距例項

間隔與間距例項

控 制 空 格 的 長 度

控制相鄰兩個字的間距

使用百分比控制行間距

使用畫素值控制行間距

使用數值(如1.2)控制行間距

空白符的預設處理,瀏覽器會忽略連續的多個空白符 為1個

空白符的pre處理,瀏覽器會保留 多個空白符,與pre標籤相似

空白符的nowarp處理,瀏覽器會忽略

回車符直到遇到br

br之後的內容

保留多個 空白符,保留

回車符忽略多個 空白符,保留

回車符

1.6、文字裝飾

文字裝飾

文字裝飾

文字裝飾

文字裝飾

文字裝飾blink瀏覽器不支援

粗體字italic斜體

oblique傾斜

斜體(italic)是一種簡單的字型風格,對每個字母的結構有一些小改動,來反映變化的外觀。

傾斜(oblique)文字則是正常豎直文字的乙個傾斜版本。

通常情況下,兩種效果在瀏覽器中看上去完全一樣。

1.7、文字陰影

文字陰影

試著把滑鼠移動到文字上!

1.8、文字毛玻璃效果

文字毛玻璃效果

本例項演示毛玻璃效果。

1.9、文字溢位隱藏與超長標題自動省略號

文字溢位隱藏與超長標題自動省略號

如果此處的文字較多,將自動裁切裁切裁切裁切

如果此處的文字較多,將自動用省略號代替!

如果此處的文字較多,將自動隱藏!如果此處的文字較多,將自動隱藏!如果此處的文字較多,將自動隱藏!如果此處的文字 較多,將自動隱藏!如果此處的文字較多,將自動隱藏!

如果此處的文字較多,將出現滾動條!如果此處的文字較多,將出現滾動條!如果此處的文字較多,將出現滾動條!

1.10、金屬質感文字

金屬質感文字

金屬質感文字

1.11、隱藏文字

隱藏文字

1.12、旋轉文字

旋轉文字

這是一段旋轉過的文字

css文字效果

css3 中,text shadow屬性適用於文字陰影。您指定了水平陰影,垂直陰影,模糊的距離,以及陰影的顏色 text shadow 5px 5px 5px ff0000 水平位置 垂直位置 模糊距離 陰影顏色 如果某個單詞太長,不適合在乙個區域內,它擴充套件到外面 css3中,自動換行屬性允許您...

CSS文字效果

text shadow 文字陰影 text shadow 畫素值1 畫素值2 畫素值3 顏色值 畫素值1 水平陰影位置,可以為負值 必選屬性 畫素值2 水平垂直位置,可以為負值 必選屬性 畫素值3 陰影拓展的距離 顏色值 陰影顏色 可選屬性 box shadow 盒子陰影 box shadow 畫素...

CSS之文字效果

1 文字陰影效果 語法1 e x,y為偏移量,取值可正可負,預設為黑色 語法2 e 語法3 e 示例 txt sha 2 多重陰影效果 語法 e 示例 txt sha 3 控制文字溢位 語法 e keyword的取值可以是clip 預設 ellipsis 示例 超出文字顯示為省略號 p 4 文字對齊...