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