高清屏中1px边框会变粗
原因
对于750设计稿,相对于iphone6的屏幕宽度是375,即2倍的dpr,当在样式中写入border: 1px solid #ccc时,渲染出来的相当于1*2px的边框,所以看起来就是比设计图粗了。
解决办法
postcss-write-svg
border-bottom: 1px solid;
border-image: svg(square param(--color #eee)) 1 stretch;
复制代码
注意: 当同时使用postcss-px-to-viewport插件进行vw方案适配时,一定要将postcss-write-svg插件放置在前面。在safari浏览器和低版本andriod中,border: 1px solid transparent; 属性会看不见线条,需要将transparent去掉。
box-shadow
box-shadow: 0 -1px 1px -1px #e5e5e5, // 上边线
1px 0 1px -1px #e5e5e5, // 右边线
0 1px 1px -1px #e5e5e5, // 下边线
-1px 0 1px -1px #e5e5e5; // 左边线
复制代码
伪类
实现四边
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
z-index: 990;
border: 1px solid #e5e5e5;
}
复制代码
单边
&::after {
content: '';
z-index: 999;
position: absolute;
top: 0;
left: 0;
background-color: #e5e5e5;
display: block;
width: 100%;
height: 1px; // 横线
transform: scale(1, 0.5);
}
复制代码
如果是竖线, 设置width为1px, height: 100%
使用边框图片
border: 1px solid transparent;
border-image: url('./image/boeder.jpg') 2 repeat;
复制代码
flexible
当通过flexible实现移动端适配时,可直接设置border为1px