伪类 :after 显示在父类后面（父类遮挡伪类一部分）实现层叠效果

最新推荐文章于 2024-03-21 10:12:30 发布

看守牧场的狼

最新推荐文章于 2024-03-21 10:12:30 发布

阅读量631

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/w263756314/article/details/125469764

版权

CSS伪类 li元素 3D转换阴影带边框 transform-style:preserve-3d

关键词由CSDN通过智能技术生成

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现效果：

如果用阴影来做，无法实现阴影带边框，故采用伪类实现

父类：

li{transform-style: preserve-3d;}

伪类：

li:after{transform: translateZ(-10px);}

最终实现：

li{transform-style: preserve-3d; float: left; padding: 5px 10px; margin-left: 13px; height: 24px; line-height: 24px; border: 1px #0b0b0b solid; border-radius: 6px; background-color: #fff; }

li:after{transform: translateZ(-10px); margin: -28px 0 0 15px; display: block; content: ' '; height: 36px; width: 100%;  border: 1px #0b0b0b solid; border-radius: 6px; background-color: #FFDA02;}