css重修之书（一）：如何用css制作比1px更细的边框

css重修之书（⼀）：如何⽤css制作⽐1px更细的边框
如何⽤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()⽅法⾥同时进⾏缩放。