CSS3实现0.5px的细线

作者: 羊烊羴 | 来源:发表于2018-03-02 14:41 被阅读0次

在移动端/内嵌页面的时候，经常需要我们绘制特别细的变宽，这个时候我们使用1px的宽度来绘制的话，在页面上看会显的特别违和，所以最好还是绘制0.5px 的细线，在IOS上我们直接设置0.5px就可以，但是在部分安卓下，我们设置了0.5px会被默认进行转换为1px，所以需要兼容，在看了几篇博客和自己试验了一番后，比较推荐以下的写法

<style>
.box{
  position: relative;
  display: inline-block;
  padding: 10px;
 }
.text{
  position: relative;
  z-index: 2;
 }
.scale_border{
   border: 1px solid orangered;
   position: absolute;
   top:-50%;
   bottom:-50%;
   left:-50%;
   right:-50%;
   transform: scale(0.5);
   -webkit-transform: scale(0.5);
   border-radius: 10px;
 }
</style>
<body>
<div class="box">
    <div class="text">这是文字内容</div>
    <div class="scale_border"></div>
</div>
</body>
···