CSS3学习——文字描边+外发光

weixin_30655219

于 2014-01-12 16:51:00 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/baixc/p/3516137.html

本文介绍了一种使用CSS为文本添加四周黑色阴影的方法，通过在文本的四个边沿添加1像素的阴影来增强视觉效果，并提供了两种不同的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、分别在文本的4个边上添加1像素的黑色阴影。

2、设计阴影不发生位移，同时定义阴影模糊既可。用一个或一组阴影都可以。

<p class="p1">Text Shadow</p>
<p class="p2">Text Shadow</p>

body{
    background-color: #ccc;
}
p{
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica,arial,sans-serif;
    color: #d1d1d1;
    font-size: 80px;
    font-weight: bold;
}
.p1{
    text-shadow:-1px 0 black,
                0 1px black,
                1px 0 black,
                0 -1px black;
}
.p2{
    text-shadow:0 0 0.2em #f87,
                -0 -0 0.2em #f87;
}