解決一像素問題網(wǎng)上有很多種方法卓起，除去縮放圖片這種限制顏色的方案外冀，以及兼容性并不好的 border-image 诀诊，我選擇了這兩種方案進(jìn)行了嘗試。下面是嘗試截圖况既。
15257817289049.jpg
使用 svg 解決一像素問題
- 安裝
postcss-write-svg基于 postcss 處理 簡(jiǎn)化 svg 的能力 - 編寫代碼片段
@svg line {
@line {
x1: var(--x1, 0);
x2: var(--x2, 100%);
y1: var(--y1, 0);
y2: var(--y2, 0);
stroke: var(--color, red);
fill: transparent;
stoke-width: 1;
}
}
:root {
--self-border-color: #00b1ff;
--self-line-item: {
height: 40px;
line-height: 40px;
text-align: center;
margin-top: 15px;
}
--self-rect-item: {
width: 90vw;
height: 40px;
line-height: 40px;
text-align: center;
margin: 20px;
}
}
- 使用定義好的函數(shù)
.svg {
@apply --self-rect-item;
background-image: svg(line param(--color #00b1ff) param(--y1 100%) param(--y2 100%));
}
/** 產(chǎn)出結(jié)果 **/
.svg{
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' x2='100%25' y1='100%25' y2='100%25' stroke='%2300b1ff' fill='transparent' stoke-width='1'/%3E%3C/svg%3E");
}
此方案優(yōu)勢(shì)：
- 獲得
svg能力 繪制出符合需求的任意角度这溅、任意長(zhǎng)度、任意位置的線. - 并且可以使用
background實(shí)現(xiàn)多背景繪制多條線棒仍。
.multi {
@apply --self-line-item;
background-image: svg(line param(--color #00b1ff) param(--y1 100%) param(--y2 100%)), svg(line param(--color red));
}
- 移動(dòng)端兼容性極佳悲靴。
此方案劣勢(shì)：
- svg 繪制圓角時(shí)表現(xiàn)不佳，代碼展示如下莫其，效果請(qǐng)參考圖片癞尚。
@svg square {
@rect {
fill: transparent;
stroke: var(--color, transparent);
stroke-width: 1;
width: 100%;
height: 100%;
rx: var(--rx, 0);
ry: var(--ry, 0);
}
}
.rect {
@apply --self-rect-item;
background-image: svg(square param(--color #00b1ff) param(--rx 10) param(--ry 10));
}
- 語(yǔ)義化并不明確，有學(xué)習(xí)成本的乱陡，具備解決北京沖突的能力浇揩。
使用偽類解決
設(shè)置偽類邊框，根據(jù) dpi 縮放容器元素的偽類實(shí)現(xiàn) 1px憨颠。
@custom-media --low-resolution (max-device-pixel-ratio: 1.49),(max-resolution: 143dpi), (max-resolution: 1.49dppx);
@custom-media --mid-resolution (min-device-pixel-ratio:1.5) and (max-device-pixel-ratio:2.49), (min-resolution:144dpi) and (max-resolution:239dpi), (min-resolution:1.5dppx) and (max-resolution:2.49dppx);
@custom-media --high-resolution (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx);
--border {
position: relative;
&::after{
pointer-events: none;
position: absolute;
z-index: 999;
top: 0;
left: 0;
bottom: 0;
content: "\0020";
transform-origin: 0 0;
}
@media (--low-resolution) {
&:after {
width: 100%;
height: 100%;
}
}
@media (--mid-resolution) {
&:after {
width: 200%;
height: 200%;
transform: scale(.5);
}
}
@media (--high-resolution) {
&:after {
width: 300%;
height: 300%;
transform: scale(.333);
}
}
}
/** 使用 **/
.fack{
@apply --border;
&::after{
border-bottom: 1px solid red;
}
}?
此方案優(yōu)勢(shì)：
1.解決圓角問題
此方案劣勢(shì)：
- 偽元素邊框?yàn)橐绯稣故镜乃砸O(shè)置
overflow：visible胳徽，否則你就只有一半的邊框了。
15257825853338.jpg
- 設(shè)置圓角需要同樣在媒體查詢下設(shè)置
.fack_border{
@apply --self-rect-item;
@apply --border;
&::after{
border: 1px solid var(--self-border-color);
}
@media (--low-resolution) {
&:after {
border-radius: 10px;
}
}
@media (--mid-resolution) {
&:after {
border-radius: 20px;
}
}
@media (--high-resolution) {
&:after {
border-radius: 30px;
}
}
}
