CSS伪元素实现边框

最新推荐文章于 2024-09-04 15:59:17 发布

jsjdguo

最新推荐文章于 2024-09-04 15:59:17 发布

阅读量1.2k

点赞数

分类专栏：移动端文章标签： css html

本文链接：https://blog.csdn.net/jsjdguo/article/details/124712519

版权

这篇博客介绍了如何利用CSS伪元素`::before`和`::after`来实现独特的边框效果。通过设置不同属性，如内容(content)、宽高(width/height)、背景色(background)以及缩放变换(scale)，可以创建出水平或垂直拉伸的细线边框，为网页设计增添创意。

摘要由CSDN通过智能技术生成

::after {
   content: "";
   width: 100%;
   height: 1px;
   background: #eee;
   -webkit-transform: scale(1, 0.5);
   -ms-transform: scale(1, 0.5);
   -o-transform: scale(1, 0.5);
   transform: scale(1, 0.5);
   -webkit-transform-origin: 0 0;
   -moz-transform-origin: 0 0;
   -ms-transform-origin: 0 0;
   -o-transform-origin: 0 0;
   transform-origin: 0 0;
   position: absolute;
   bottom: 0;
   left: 0;
}

::after {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 200%;
   height: 200%;
   pointer-events: none;
   content: "";
   border-right: 1px solid #e6e6e6;
   -