css 实现 0.5 px 的 border

在做手机页面的时候，有时候需要模仿原生的那种 1px 下划线的效果，普通的 css 1px 看起来比原生的粗，所以我们可以考虑实现 0.5px 的border 来实现这个效果，因为只有少数的设备才支持 0.5px 这个属性值，所以我们只能通过其他办法来实现，比如：

<div class="btn">.5px border</div>

 .btn {
        position: relative;
        width: 200px;
        height: 42px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align: center;
        line-height: 42px;
        background-color: #ededed;
      }
      .btn:before {
        content: "";
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -50%;
        right: -50%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        border-style: solid;
        border-width: 1px;
        border-color: red;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      }

-------------------------------------------------------------------------------------------

更新，到了这个年代，当然要使用最简单的方式进行处理了

 

 

PostCSS Write SVG

使用border-image每次都要去调整图片，总是需要成本的。基于上述的原因，我们可以借助于PostCSS的插件postcss-write-svg来帮助我们。如果你的项目中已经有使用PostCSS，那么只需要在项目中安装这个插件。然后在你的代码中使用：

@svg 1px-border {

    height: 2px;

    @rect {

        fill: var(--color, black);

        width: 100%;

        height: 50%;

    }

}

 

.example {

    border: 1px solid transparent;

    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;

}

这样PostCSS会自动帮你把CSS编译出来：

.example {

    border: 1px solid transparent;

    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;

}

使用PostCSS的插件是不是比我们修改图片要来得简单与方便。

使用PostCSS的postcss-write-svg插件，除了可以使用border-image来实现1px的边框效果之外，还可以使用background-image来实现。比如：

@svg square {

    @rect {

        fill: var(--color, black);

        width: 100%;

        height: 100%;

    }

}

 

#example {

    background: white svg(square param(--color #00b1ff));

}

编译出来就是：

#example {

    background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");

}

这个方案简单易用，是我所需要的。目前测试下来，基本能达到我所需要的需求，在最新的适配方案中，我也采用了这个插件来处理1px边框的问题。

除此之外网友还整理了一些其他的方案，比如说：background-image、box-shadow和transform之类的。

其中box-shadow不推荐使用，而background-image和上面的PostCSS方案有点类似，只不过PostCSS更为方便，实在无耐之下，transform和伪元素或者伪类的配合还是可以值得一用的。比如：

.hairlines li{

    position: relative;

    border:none;

}

.hairlines li:after{

    content: '';

    position: absolute;

    left: 0;

    background: #000;

    width: 100%;

    height: 1px;

    transform: scaleY(0.5);

    transform-origin: 0 0;

}

使用的时候，也需要结合JavaScript代码，用来判断是否是Retina屏。当然除了JavaScript来判断之外，你还可以借助于媒体查询来处理。

另外如果ios border-image无效的话则需要才出来

因为边框是需要特殊花纹的所以打算用border-image实现。

?

1 2 3 4 5 6 7 8

.example{  ……    border:6px solid transparent;  -webkit-border-image:url(../img/border_img.jpg) 6 6 round;  border-image:url(../img/border_img.jpg) 6 6 round;  …… }

 

最终发现安卓显示正常。IOS边框是显示不出来的。

解决办法是：

把 border:6px solid transparent; 替换为单独的属性，即：border-style 和 border-width。

?

1 2 3 4 5 6 7 8

example{   ……   border-style: solid;   border-width: 6px;   -webkit-border-image:url(../img/border_img.jpg) 6 6 round;   border-image:url(../img/border_img.jpg) 6 6 round;   ……  }