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()方法里同時進行縮放。