CSS3：CSS3 文本效果

ylbtech-CSS3：CSS3 文本效果

?

1.返回頂部

1、

CSS3?文本效果

---

CSS3 文本效果

CSS3中包含幾個新的文本特征。

在本章中您將了解以下文本屬性：

• text-shadow
• box-shadow
• text-overflow
• word-wrap
• word-break

---

瀏覽器支持

屬性	?	?	?	?	?
text-shadow	4.0	10.0	3.5	4.0	9.5
box-shadow	10.0 4.0?-webkit-	9.0	4.0 3.5?-moz-	5.1 3.1?-webkit-	10.5
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0?-o-
word-wrap	23.0	5.5	3.5	6.1	12.1
word-break	4.0	5.5	15.0	3.1	15.0

---

CSS3 的文本陰影

CSS3 中，text-shadow屬性適用于文本陰影。

您指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：

實例

給標題添加陰影:

h1 { text-shadow: 5px 5px 5px #FF0000; }

嘗試一下 ?

---

CSS3 box-shadow屬性

CSS3 中 CSS3 box-shadow 屬性適用于盒子陰影

實例

div { box-shadow: 10px 10px 5px #888888; }

嘗試一下 ?

---

接下來給陰影添加顏色

實例

div { box-shadow: 10px 10px grey; }

嘗試一下 ?

---

接下來給陰影添加一個模糊效果

實例

div { box-shadow: 10px 10px 5px grey; }

嘗試一下 ?

---

你也可以在 ::before 和 ::after 兩個偽元素中添加陰影效果

實例

#boxshadow { position: relative; b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5); pa dding: 10px; bac kground: white; } #boxshadow img { width: 100%; border: 1px solid #8a4419; border-style: inset; } #boxshadow::after { content: ''; position: absolute; z-index: -1; /* hide shadow behind image */ box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%; left: 15%; /* one half of the remaining 30% */ height: 100px; bottom: 0; }

嘗試一下 ?

---

陰影的一個使用特例是卡片效果

實例

div.card { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; }

文字卡片 ??圖片卡片 ?

---

CSS3 Text Overflow屬性

CSS3文本溢出屬性指定應向用戶如何顯示溢出內容

實例

p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; }

嘗試一下 ?

---

CSS3的換行

如果某個單詞太長，不適合在一個區域內，它擴展到外面：

CSS3中，自動換行屬性允許您強制文本換行 - 即使這意味著分裂它中間的一個字：

CSS代碼如下：

實例

允許長文本換行:

p {word-wrap:break-word;}

嘗試一下 ?

---

CSS3 單詞拆分換行

CSS3 單詞拆分換行屬性指定換行規則：

CSS代碼如下：

實例

p.test1 { word-break: keep-all; } p.test2 { word-break: break-all; }

嘗試一下 ?

---

新文本屬性

屬性	描述	CSS
hanging-punctuation	規定標點字符是否位于線框之外。	3
punctuation-trim	規定是否對標點字符進行修剪。	3
text-align-last	設置如何對齊最后一行或緊挨著強制換行符之前的行。	3
text-emphasis	向元素的文本應用重點標記以及重點標記的前景色。	3
text-justify	規定當 text-align 設置為 "justify" 時所使用的對齊方法。	3
text-outline	規定文本的輪廓。	3
text-overflow	規定當文本溢出包含元素時發生的事情。	3
text-shadow	向文本添加陰影。	3
text-wrap	規定文本的換行規則。	3
word-break	規定非中日韓文本的換行規則。	3
word-wrap	允許對長的不可分割的單詞進行分割并換行到下一行。	3

2、

2.返回頂部

3.返回頂部

4.返回頂部

5.返回頂部

1、

http://www.runoob.com/css3/css3-text-effects.html

2、

6.返回頂部

作者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。