css3學習總結5--CSS3文字效果

CSS3 文字效果

• 1. text-shadow
• 2. word-wrap

text-shadow屬性使用方法

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

text-shadow:length length length color

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

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

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

位移距離

text-shadow屬性所使用的引數中，前兩個引數為陰影離開文字的橫方向位移距離與縱方向位移距離。

使用text-shadow屬性時必須要指定這兩個引數，可以對這兩個引數指定負數值。

示例：

.className
{
　　text-shadow:-15px 10px 5px gray;
　　color:navy;
　　font-size:50px;
　　font-weight:bold;
}

　　

指定多個陰影

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

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

示例程式碼

為文字依次指定了桔色、黃色及綠色陰影，同時也為這些陰影指定了適當的位置。

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

　　

自動換行

在 CSS3 中，word-wrap 屬性允許您允許文字強制文字進行換行 - 即使這意味著會對單詞進行拆分

p {word-wrap:break-word;}