Rumah > Artikel > hujung hadapan web > 字体加阴影效果怎么用css属性实现？（代码演示）
字体加阴影效果怎么用css属性实现？（代码演示）
- 藏色散人asal
- 2018-08-10 16:27:035526semak imbas
本篇文章给大家介绍，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>以上代码效果如下图：
注：所有主流浏览器都支持 text-shadow 属性。Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。
text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
其属性可能值：
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
Atas ialah kandungan terperinci 字体加阴影效果怎么用css属性实现？（代码演示）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css怎么实现鼠标移动到div块时自动加阴影效果？Artikel seterusnya：为什么有时候使用css中hover属性会没有反应？（示例）