標籤：文法 bsp har contains 學習筆記 str 取值 應用 www
text-shadow
文法
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*也就是：text-shadow:[顏色(Color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)],[顏色(color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)]...或者text-shadow:[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)],[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)]...
取值:
<length>：長度值，可以是負值。用來指定陰影的延伸距離。其中X Offset是水平位移值，Y Offset是垂直位移值
<color>：指定陰影顏色，也可以是rgba透明色
<shadow>：陰影的模糊值，不可以是負值，用來指定模糊效果的作用距離。
如所示：
說明：
可以給一個對象應用一組或者多組陰影製作效果。方法與前面的文法一樣 用逗號隔開 text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示陰影的水平位移距離，其值為正值時陰影向右位移，如果其值為負值時，陰影向左位移；Y-Offset是指陰影的垂直位移距離，如果其值是正值時，陰影向下位移反之其值是負值時陰影向頂部位移；Blur是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設定為0；Color是指陰影的顏色，其可以使用rgba色。
瀏覽器的相容性
我們來看一下執行個體：
首先給所有的demo一個公用的樣式和類名
<html> <head> <meta charset="UTF-8"> <style type="text/css"> #shadow{ width: 120px; height: 50px; border: 1px solid orange; text-align: center; vertical-align: bottom; font-size: 17px; text-shadow: 1px 1px 0px blue; } </style> </head> <body> <div id="shadow"> 文字陰影製作效果 </div> </body></html>
更詳細的講解 請移步 http://www.w3cplus.com/blog/52.html
CSS3文本換行
單詞太長的話 就會超出某個地區 在CSS3中 word-wrap屬性允許你允許強制文本換行 即使這意味著會對單詞進行拆分。
執行個體：
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .pc { width: 11em; border: 1px solid orange; border-bottom-left-radius: 8px; word-wrap: break-word; } </style> </head> <body> <p class="pc">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> </body></html>
新的文字屬性
HTML 學習筆記 CSS3 (文字效果)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
