css3新增文本屬性
css3新增屬性🔑
- 邊框屬性
- 背景屬性
- 文本屬性
- 顏色屬性
文本屬性🔨
| 屬性 | 說明 |
|
text-shadow |
為文字添加陰影 |
|
box-shadow |
在元素的框架上添加陰影效果 |
|
text-overflow |
確定如何向用戶發出未顯示的溢出內容訊號 |
|
word-wrap |
允許對長的不可分割的單詞進行分割並換行到下一行 |
|
word-break |
指定了怎樣在單詞內斷行 |
1. text-shadow（文字陰影）💡
text-shadow為文字添加陰影，陰影值之間用逗號隔開，每個陰影值由元素在X和Y方向的偏移量、模糊半徑和顏色值組成
語法：
div{ /* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* Use defaults for color and blur-radius */ text-shadow: 5px 10px; /* Global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; }
注意：
- 陰影相對文字的偏移量必寫，顏色和模糊半徑可選
- 當陰影大於一個時要用逗號區別開陰影之間的參數
- 當所給的陰影大於一個時，陰影應用的順序為從前到後, 第一個指定的陰影在頂部.
- 這個屬性同時適用於
::first-line以及::first-letter偽元素
例：
h1 { /*水平陰影，垂直陰影，模糊的距離，以及陰影的顏色*/ text-shadow: 5px 5px 5px #FF0000; }
2. box-shadow（盒子陰影）💡
box-shadow屬性用於在元素的框架上添加陰影效果，可以設置多個陰影效果，並用逗號將他們分隔開該屬性可設置的值包括陰影的X軸偏移量、Y軸偏移量、模糊半徑、擴散半徑和顏色。
幾乎可以在任何元素上使用box-shadow來添加陰影效果。如果元素同時設置了 border-radius 屬性 ，那麼陰影也會有圓角效果。
語法：
div{ /* x偏移量 | y偏移量 | 陰影顏色 */ box-shadow: 60px -16px teal; /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */ box-shadow: 10px 5px 5px black; /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* 插頁(陰影向內) | x偏移量 | y偏移量 | 陰影顏色 */ box-shadow: inset 5em 1em gold; /* 任意數量的陰影，以逗號分隔 */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* 全局關鍵字 */ box-shadow: inherit; box-shadow: initial; box-shadow: unset; }
在這裡，如果 border-radius 屬性的值：
- 兩個值：表示x和y的偏移量
- 三個值：第三個值越大，模糊面積越大，陰影就越大越淡，但不能為負值（模糊度）
- 四個值：第四個值取正值時，陰影擴大；取負值時，陰影收縮（模糊範圍）。默認為0，此時陰影與元素同樣大
inset關鍵字：如果沒有指定inset，默認陰影在邊框外，即陰影向外擴散；使用inset關鍵字會使得陰影落在盒子內部
例：
<style> blockquote { padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); } </style> <body> <blockquote><q>You may shoot me with your words,<br/> You may cut me with your eyes,<br/> You may kill me with your hatefulness,<br/> But still, like air, I'll rise.</q> <p>— Maya Angelou</p> </blockquote> </body>
3.text-overflow（文本溢出）💡
text-overflow文本溢出屬性指定應向用戶如何顯示溢出內容。它可以被剪切，顯示一個省略號（’…’，U + 2026 HORIZONTAL ELLIPSIS）或顯示一個自定義字元串。
注意：
- 這個屬性只對那些在塊級元素溢出的內容有效，但是必須要與塊級元素內聯(inline)方向一致（舉個反例：內容在盒子的下方溢出。此時就不會生效）
- 這個屬性並不會強制「溢出」事件的發生
文本可能在以下情況下溢出：當其因為某種原因而無法換行(例子：設置了”white-space:nowrap”)，或者一個單詞因為太長而不能合理地被安置(fit)
「關於更多text-overflow 屬性的使用，在這裡我已經做出了詳解：點擊鏈接跳轉 」
3.word-wrap（單詞換行）💡
word-wrap自動換行屬性允許您強制文本換行 – 即使這意味著分裂它中間的一個字
注意：
word-wrap屬性原本屬於微軟的一個私有屬性，在CSS3現在的文本規範草案中已經被重名為overflow-wrapword-wrap現在被當作overflow-wrap的 「別名」。穩定的Google Chrome 和 Opera 瀏覽器版本支援這種新語法。
p { /*表示如果行內沒有多餘的地方容納該單詞到結尾，則那些正常的不能被分割的單詞會被強制分割換行*/ word-wrap:break-word; }
4.word-break（單詞拆分換行）💡
word-break指定了怎樣在單詞內斷行
div{ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* deprecated */ }
-
normal：使用默認的斷行規則 -
break-all：對於non-CJK (CJK 指中文/日文/韓文) 文本，允許在單詞內換行。 -
keep-all：只能在半形空格或連字元處換行
OK，在這裡我大概把css3中新增的文本屬性介紹完了，有不對的望各位大佬明確指出~~🧡💛💚💙💜🤎🖤
