亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS3文字效果

1.text-shadow屬性使用方法

text-shadow屬性使用方法如下所示。

text-shadow:length length length color

其中,前面三個length分別指陰影離開文字的橫方向距離、陰影離開文字的縱向距離和陰影的模糊半徑,color指陰影的顏色。

下面是一個text-shadow屬性的使用範(fàn)例。在該範(fàn)例中給一段紅色文字繪製灰色陰影。其中陰影離開文字的橫方向距離和縱向距離均為5個像素。

.wrap{
text-shadow:5px 5px 5px gray;
color:red;font-size:50px;
font-weight:bold;
}

2.指定多個陰影

可以使用text-shadow屬性來給文字指定多個陰影,並且針對每個陰影使用不同顏色。

指定多個陰影時使用逗號將多個陰影分隔。到目前為止,只有Firefox瀏覽器、Chrome瀏覽器及Opera瀏覽器對此功能提供支援。

範(fàn)例程式碼

為文字依序指定了桔色、黃色及綠色陰影,同時也為這些陰影指定了適當(dāng)?shù)奈恢谩?

.wrap {
  text-shadow:10px 10px #f39800,40px 35px #fff100,70px 60px #c0ff00;
color:navy;
font-size:50px;
font-weight:bold;
}

自動換行

單字太長的話就可能無法超出某個區(qū)域:

QQ圖片20161021131720.png

在CSS3 中,word-wrap 屬性允許您允許文字強(qiáng)製文字進(jìn)行換行- 即使這意味著會對單字進(jìn)行拆分:

QQ截圖20161021131825.png

#允許對長單字進(jìn)行拆分,並換行到下一行:

p?{word-wrap:break-word;}

新文字屬性? ? ? ? ? ? ? ? ? ??

?? ? ? ? ? ? ? ? ? ? ? ?說明? ? ? ? ? ? ? ? ? 適用#CSS


hanging-punctuation ? ? ? ? ?規(guī)定標(biāo)點(diǎn)字元是否位於線框外。 ? ? ? ? ? ? ? ? ? ? ? 3 ? ?

punctuation-trim ? ? ? ? ? ? ? ?時中使用標(biāo)記字元修剪。 ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?

text-align-last ? ? ? ? ?之後對上上加行中相加強(qiáng)制執(zhí)行上強(qiáng)制強(qiáng)制執(zhí)行符號或強(qiáng)制執(zhí)行後強(qiáng)制執(zhí)行符號或固定的強(qiáng)制執(zhí)行符。 ? ?3 ? ?

text-emphasis ? ?向元素的文字應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。 ? ? ? ? ? ? ?3 ? ?

###############################################################

text-justify ? ?規(guī)定當(dāng) text-align 設(shè)定為 "justify" 時所使用的對齊方法。 ? ? ? ? ? 3 ? ?

text-outline ? ? ? ? ? ? ? ? ? ? ? ? ? ?作用 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ?. ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?

##text-shadow ? ? ? ? ??時使用中陰影 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ??? ? ?規(guī)定文字的換行規(guī)則。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?## 中規(guī)定?。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?

word-wrap ? ?分割中分割中與中一行的單字分開並換行。 ? ? ? ? ? ? ? ? 3 ? ?

繼續(xù)學(xué)習(xí)
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style> </head> <body> <h1>文字陰影效果</h1> <p><b>注意:</b> Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow屬性.</p> </body> </html>
提交重置程式碼