3.6 (案例) text-shadow

text-shadow.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            color: #fff;
            font-size: 30px;
            /*text-shadow:1px 1px 10px #000;*/
            text-shadow:1px 1px 5px red;
        }

        .box2{
            color: #fff;
            font-size: 30px;
            text-shadow:1px 1px 1px red,2px 2px 2px #333,3px 3px 3px #FFC0CB,4px 4px 4px #FADB4E,5px 5px 5px #000,6px 6px 5px #000,7px 7px 5px #000,8px 8px 5px #000,9px 9px 5px #000,10px 10px 5px #D00000;
        }
    </style>
</head>
<body>
    text-shadow:水平偏移量 垂直偏移量 陰影模糊值 顏色(rgba)
    <div class="box1">
        文本陰影效果
    </div>

    text-shadow 可設(shè)置多個(gè)陰影效果
    <div class="box2">
        文本陰影效果
    </div>
</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容