一、伪类 + transform
基于 media
查询判断不同的设备像素比对线条进行缩放:
.border_1px:before{ content: ‘‘; position: absolute; top: 0; height: 1px; width: 100%; background-color: #000; transform-origin: 50% 0%; } @media only screen and (-webkit-min-device-pixel-ratio:2){ .border_1px:before{ transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio:3){ .border_1px:before{ transform: scaleY(0.33); } }
这种方式可以满足各种场景,如果需要满足圆角,只需要给伪类也加上 border-radius
即可。
二、SVG
借助 PostCSS
的 postcss-write-svg
我们能直接使用 border-image
和 background-image
创建 svg
的 1px
边框:
@svg border_1px { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } } .example { border: 1px solid transparent; border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch; }
这种方案基本可以满足所有场景,而且不需要外部引入。
原文地址:https://www.cnblogs.com/PYiP/p/11750947.html
时间: 2024-10-07 03:31:29