在移動(dòng)端/內(nèi)嵌頁(yè)面的時(shí)候，經(jīng)常需要我們繪制特別細(xì)的變寬，這個(gè)時(shí)候我們使用1px的寬度來(lái)繪制的話，在頁(yè)面上看會(huì)顯的特別違和，所以最好還是繪制0.5px 的細(xì)線，在IOS上我們直接設(shè)置0.5px就可以，但是在部分安卓下，我們?cè)O(shè)置了0.5px會(huì)被默認(rèn)進(jìn)行轉(zhuǎn)換為1px，所以需要兼容，在看了幾篇博客和自己試驗(yàn)了一番后，比較推薦以下的寫法
<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">這是文字內(nèi)容</div>
<div class="scale_border"></div>
</div>
</body>
···