css重修之书（一）：如何用css制作比1px更细的边框-优快云博客

本文介绍了一种利用CSS伪元素及transform属性实现比1px更细的边框的方法，适用于需要精细控制边框宽度的设计场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何用css制作比1px更细的边框

在项目的开发过程中，我们常常会使用到border:1px solid xxx,来对元素添加边框；可是1px的border看起来还是粗了一些粗，不美观，那么有什么方法可以添加比1px更细的边框呢？这里我们可以用:before或者:after来解决：

1：设置横向的边框：

.my_content{
　　position:relative;
}

.my_content:before{
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #c8c7cc;
}

我们给元素添加before伪类，设置content为空。接下来定位到你需要的方向，设置宽度为1px后，通过css3的scaleX(.5)将宽度为1px的内容缩小一半

2：设置纵向的边框：

.my_content2{
　　position:relative;
}

.my_content2:after{
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height:100%;
    content: '';
    -webkit-transform: scale(0.5, 0.8);
    transform: scale(0.5, 0.8);
    background-color: #c8c7cc;
}

设置纵向的边框时，我们需要同时设置宽度和高度，然后在scale()方法里同时进行缩放。

转载于:https://www.cnblogs.com/momozjm/p/6899313.html