伪类选择器 before 和after的使用实例制作圆角

最新推荐文章于 2025-06-29 09:09:03 发布

duanmingyue789

最新推荐文章于 2025-06-29 09:09:03 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：伪类选择器 before after

本文链接：https://blog.youkuaiyun.com/duanmingyue789/article/details/73136532

伪类选择器同时被 3 个专栏收录

1 篇文章

订阅专栏

before

1 篇文章

订阅专栏

after

1 篇文章

订阅专栏

本文介绍了如何利用CSS伪类选择器`::before`和`::after`来创建圆角效果。通过在元素前后添加内容，并结合边框和内边距，可以实现不借助额外HTML标签的圆角样式。实例展示了具体的CSS代码和应用方法。

比如：

.panel-czbk > .panel-heading::before,
.panel-czbk > .panel-heading::after {
  content: ' ';
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #f0f0f0;
  position: absolute;
}

.panel-czbk > .panel-heading::before {
  top: -8px;
  left: -8px;
}

.panel-czbk > .panel-heading::after {
  bottom: -8px;
  left: -8px;
  box-shadow: 0 2px 1px #ccc inset;
}