text-shadow 文本陰影

它可以給任意的字符設置一個或多個陰影。

1. 官方定義

text-shadow 屬性向文本設置陰影。

2. 慕課解釋

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

3. 語法

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

屬性值

4. 兼容性

5. 實例

1.為文字添加陰影。

<div class="demo">慕課網</div>

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

效果圖

2. 制作一個文字發光效果。

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

效果圖

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

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

.demo{
    font-size: 30px;
    color: #fff;
    text-shadow:1px 1px hsl(0,0%,85%),
            2px 2px hsl(0,0%,80%),
            3px 3px hsl(0,0%,75%),
            4px 4px hsl(0,0%,70%),
            5px 5px hsl(0,0%,65%),
            5px 5px 10px black;
}

效果圖

說明：這個效果也是利用各種色組疊加來實現的。

6. 經驗分享

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

7. 小結

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