0.5像素边框的实现

设计稿中的1像素在网页中实际是2像素，要实现1像素的边框需要制作0.5像素的boder，下面举例纯css利用伪类制作0.5像素边框：

　　　　　　.box{
                width:300px;
                line-height:150px;
                position:relative;
                background-color:#f1f1f1;
                text-align:center;
            }
            .box:after {
                content: " ";
                position: absolute;
                left: 0;
                width: 100%;
                height: 1px;
                color: #d9d9d9;
                bottom: 0;
                border-bottom: 1px solid #fff;
                -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
            }

 还有一种写法：

　　　　　　.box:before{
                content: '';
                position: absolute;
                width: 200%;
                height: 200%;
                border-bottom: 1px solid red;/* 直接改变border的位置即可 */
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: scale(0.5, 0.5);
                transform: scale(0.5, 0.5);
                box-sizing: border-box;
            }

 

转载于:https://www.cnblogs.com/moumou0213/p/6490536.html