text-shadow 文本陰影

它可以給任意的字符設(shè)置一個(gè)或多個(gè)陰影。

1. 官方定義

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

2. 解釋

text-shadow 一共接受 4 個(gè)參數(shù)，前兩個(gè)是陰影的位置通過 x，y坐標(biāo)系來設(shè)定，第三個(gè)參數(shù)設(shè)定模糊的大小，最后一個(gè)參數(shù)設(shè)定陰影的顏色。

3. 語法

.demo{
    text-shadow: h-shadow v-shadow blur color;
}

屬性值

4. 兼容性

5. 實(shí)例

1.為文字添加陰影。

<div class="demo">網(wǎng)</div>

.demo{
     text-shadow:px px px red;
}

效果圖

2. 制作一個(gè)文字發(fā)光效果。

html,body{
    background: #000;
}
.demo{
    color: #fff;
    text-shadow:px px px #fff,-px -px px #fff,px -px px #fff,-px px px #fff;
}

效果圖

說明：其實(shí)就是在各個(gè)方向上都增加一個(gè)白色的陰影，在黑色的背景下就顯得有發(fā)光的效果了。

3. 通過投影直至化制作一個(gè)3D的文字效果。

.demo{
    font-size: px;
    color: #fff;
    text-shadow:px px hsl(,,),
            px px hsl(,,),
            px px hsl(,,),
            px px hsl(,,),
            px px hsl(,,),
            px px px black;
}

效果圖

說明：這個(gè)效果也是利用各種色組疊加來實(shí)現(xiàn)的。

6. 經(jīng)驗(yàn)分享

首先通過上面的例子我們可以了解到這個(gè)屬性是可以無限制的增加一個(gè)顏色組，通過通過這個(gè)可以制作出很多有意思的效果。例如下雨的圓形光暈等等。

7. 小結(jié)

在以前也有text-shadow:#000 5px 5px 5px這樣的寫法，不過不推薦。