卡卡網(wǎng)

css3很多知識值得我們?nèi)チ私?，一些我們慣常用圖片制作出來的效果，也許用CSS3幾行代碼就能實現(xiàn)，正如本文介紹的，使用css text-shadow 屬性，就能輕松實現(xiàn)文字投影/描邊/浮雕/剪紙/發(fā)光等效果。

css text-shadow 實現(xiàn)文字投影/描邊/浮雕/剪紙/發(fā)光效果

demodownload

CSS代碼

.shadow1 {
    color: red;
    text-shadow: 5px 5px 5px #000;
}

.shadow2 {
    color: white;
    text-shadow: -1px 0px 1px red, 1px 0px 1px red, 0px -1px 1px red, 0px 1px 1px red;
}

.shadow3 {
    color: white;
    text-shadow: -1px -1px 3px black, 0 0 5px blue, 0 0 8px blue;
}

.shadow4 {
    color:  white;
    text-shadow: 1px 0px 0px #00B4F1,2px 0px 0px #00B4F1,3px 1px 0px #00B4F1,0px 1px 0px #000;
}

.shadow5 {
    color: blue;
    background-color:#949191;
    text-shadow: 0px 0px 3px white, 0px 0px 5px white;
}

HTML代碼

<h1 class="shadow1">文字的投影效果</h1>
<h1 class="shadow2">文字的描邊效果</h1>
<h1 class="shadow3">文字的浮雕效果</h1>
<h1 class="shadow4">文字的剪紙效果</h1>
<h1 class="shadow5">文字的發(fā)光效果</h1>

execcodegetcode

代碼解釋

代碼僅用了 CSS3 中的 text-shadow 屬性，text-shadow 屬性是用于向文本設(shè)置陰影的，可以向文本添加一個或多個陰影，用逗號分隔。

CSS3 text-shadow 屬性定義及使用說明

text-shadow 屬性是用于向文本設(shè)置陰影的。

語法

text-shadow: h-shadow v-shadow blur color;

注意：text-shadow 屬性向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進(jìn)行規(guī)定。省略的長度是 0。

屬性值

簡單說明：

可以給一個對象應(yīng)用一組或多組陰影效果，方式如前面的語法顯示一樣，用逗號隔開。

text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示陰影的水平偏移距離，其值為正值時陰影向右偏移，如果其值為負(fù)值時，陰影向左偏移；Y-Offset是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移反之其值是負(fù)值時陰影向頂部偏移；Blur是指陰影的模糊程度，其值不能是負(fù)值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設(shè)置為0；Color是指陰影的顏色，其可以使用rgba色。

您可能對以下文章也感興趣

• 純CSS實現(xiàn)文字漸變和文字掃光動畫效果
• 使用CSS創(chuàng)建的霓虹燈效果/發(fā)光效果文本

標(biāo)簽: text-shadow  發(fā)光文本  css-shadow  文字投影效果  文字描邊效果  文字浮雕效果  文字剪紙效果  css3  css