使用Before和After伪元素制作文本阴影

最新推荐文章于 2020-12-29 08:26:32 发布

黄宝康

最新推荐文章于 2020-12-29 08:26:32 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：使用Before和After伪元素制作文本阴影

本文链接：https://blog.youkuaiyun.com/huangbaokang/article/details/82017558

css 专栏收录该内容

33 篇文章

订阅专栏

本文通过一个实例详细解析了CSS伪元素:before和:after的使用技巧，展示了如何利用它们实现阴影效果，适用于banner图设计，无需额外制图。

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

需要理解:before和:after的使用，如下代码收藏于慕课网。
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
.box h3{
  text-align:center;
  position:relative;
  top:80px;
}
.box {
  width:70%;
  height:200px;
  background:#FFF;
  margin:40px auto;
}

.effect{
  position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
</style>
</head>
<body>
  <div class="box effect">
  <h3>Shadow Effect </h3>
</div>
</body>
</html>