共计 848 个字符,预计需要花费 3 分钟才能阅读完成。
直接设置 border:1px solid #ccc; 在手机下看会比设计稿粗,浏览器边框的最小的显示像素是 1px, 设置 0.5px 也是会渲染成 1px 的效果,而在 css 的 1px 根据手机的品牌或型号不同在高清屏的物理像素是 2 像素或者 3 像素
<div class="list-wrapper border-1px">
</div>
border-1px:after 保存公用样式,list-wrapper:after 进行个性化设置,如圆角大小,边框颜色
.list-wrapper {
width: 300px;
height: 200px;
margin: 100px auto;
}
.list-wrapper:after {
border-radius: 20px;
border-color:#ccc ;
}
.border-1px {position: relative}
.border-1px:after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
width: 100%;
height: 100%;
}
@media (-webkit-min-device-pixel-ratio: 2) {
.border-1px:after {
width: 200%;
height: 200%;
-webkit-transform: scale(.5);
transform: scale(.5)
}
}
@media (-webkit-min-device-pixel-ratio: 3) {
.border-1px:after {
width: 300%;
height: 300%;
-webkit-transform: scale(.333);
transform: scale(.333)
}
}
正文完