字体加阴影效果怎么用css属性实现？（代码演示）-css教程-PHP中文网

字体加阴影效果怎么用css属性实现？（代码演示）

藏色散人

发布： 2018-08-10 16:27:03

原创

5716人浏览过

本篇文章给大家介绍，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字体阴影效果二具体代码示例如下：

<!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>

登录后复制

以上代码效果如下图：

立即学习“前端免费学习笔记（深入）”；