CSS3实现0.5px的细线
2018-03-02 本文已影响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>
···
