首頁 > 文章 > web前端 > 字體加陰影效果怎麼用css屬性實現？（程式碼演示）

字體加陰影效果怎麼用css屬性實現？（程式碼演示）

藏色散人原創: 2018-08-10 16:27:035524瀏覽

這篇文章跟大家介紹，css好看的字體樣式的效果展示。希望對有需要的朋友有幫助。

css字體陰影效果一具體程式碼範例如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css字体阴影测试一</title>
    <meta charset="UTF-8">
    <style type="text/css">
        h3.a {text-shadow: 0.1em 0.1em 0.05em #333
 }
        h3.b {text-shadow: 0.1em 0.1em 0.2em black}
    </style>
</head>
<body>
<h3 class="a">css好看的字体样式之阴影效果</h3>
<h3 class="b">css好看的字体样式之阴影效果</h3>
</body>
</html>

以上程式碼效果如下如：

字體加陰影效果怎麼用css屬性實現？（程式碼演示）

##css字體陰影效果二具體程式碼範例如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css字体阴影测试一</title>
    <meta charset="UTF-8">
    <style type="text/css">
        h3{color: #1b5c16;}
        h3.a {text-shadow: -1px -1px white, 1px 1px #333}
        h3.b {text-shadow: 1px 1px white, -1px -1px #444}
    </style>
</head>
<body>
<h3 class="a">css好看的字体样式之阴影效果</h3>
<h3 class="b">css好看的字体样式之阴影效果</h3>
</body>
</html>

以上程式碼效果如下圖：

字體加陰影效果怎麼用css屬性實現？（程式碼演示）