CSS3学习笔记（十）——UI元素状态伪类选择器 ::before和::after

最新推荐文章于 2021-11-16 09:53:34 发布

Bambi12

最新推荐文章于 2021-11-16 09:53:34 发布

阅读量319

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Bambi12/article/details/84790161

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <title>before&after</title>
    <style>
        .box h3{
            text-align: center;
            position: relative;
            top:80px;
        }
        .box{
            width: 300px;
            height: 200px;
            background-color: #ffffff;
            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 Effdect</h3>
    </div>
</body>
</html>

没有添加伪类时效果：

添加伪类后效果：

笔记整理出自：https://www.imooc.com/learn/33

Bambi12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记（十）——UI元素状态伪类选择器 ::before和::after

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;title&gt;before&amp;after&lt;/title&gt; &lt;style&gt; .box h3{ text-align: center; position
复制链接

扫一扫