CSS 实现类似原生效果的 1px 边框

普罗米绣丝

于 2019-09-26 16:20:21 发布

阅读量327

点赞数

分类专栏： javaScript web前端前端

本文链接：https://blog.youkuaiyun.com/weixin_43187345/article/details/101451001

版权

web前端同时被 3 个专栏收录

29 篇文章

订阅专栏

前端

21 篇文章

订阅专栏

javaScript

9 篇文章

订阅专栏

CSS 实现类似原生效果的 1px 边框

.border-1px {
    position: relative;
}
.border-1px:after {
    position: absolute;
    content: '';
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}