码迷,mamicode.com
首页 > Web开发 > 详细

CSS画0.5px的线

时间:2017-04-25 16:47:15      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:absolute   方法   pre   css   log   before   index   color   border   

今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主。代码如下:

/*0.5px上边框*/
.half_top_border_before:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0.05rem;
    background-color: #ececec;
    transform: scaleY(0.5);
    transform-origin: center top;
    z-index: 2;
}

利用after和before的话好像只能画两条线,如果要画整个边框可以先画两倍长宽的边框在缩小到0.5。需要三条边框的话可以考虑在容器内建立三个容器表示边框线再缩小。

CSS画0.5px的线

标签:absolute   方法   pre   css   log   before   index   color   border   

原文地址:http://www.cnblogs.com/zczhangcui/p/6762040.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!