【css】移动端兼容 border显示不全

小于1px的边框兼容性处理

    • 方案一 transform rotateZ(360deg)
    • 方案二 使用UI切图实现(不推荐)
    • 方案三 和UI沟通,尽量避免使用0.5px的边,线(推荐)
    • 方案四 (概念方案,未验证) 使用1px的边线,设法隐藏一半

box-shadow, border等不明原因被遮挡的问题;小于1px的边框在部分机型显示不全 或 完全渲染不出来的问题
在这里插入图片描述

border: 0.5px solid #000;
border-radius: 0.5px;

方案一 transform rotateZ(360deg)

此方法也能解决 box-shadow, border等不明原因被遮挡的问题

border: 0.5px solid #000;
border-radius: 0.5px;

// 解决ios边框显示一半的问题
transform: rotateZ(360deg);

方案二 使用UI切图实现(不推荐)

方案三 和UI沟通,尽量避免使用0.5px的边,线(推荐)

0.5px的边线在移动端渲染还有一些未知的问题,建议尽量不要使用0.5px的边线

// iphone XS 把0.5px的dashed 虚线  渲染成了 border-bottom 0.5px dotted #C4C4C9
border-bottom: 0.5px dashed #C4C4C9;

方案四 (概念方案,未验证) 使用1px的边线,设法隐藏一半

你可能感兴趣的:(html+css,工作记)