cssnext 環(huán)境下1px border 解決方案

解決一像素問題網(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ì):

  1. 獲得 svg 能力 繪制出符合需求的任意角度这溅、任意長(zhǎng)度、任意位置的線.
  2. 并且可以使用 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));
}
  1. 移動(dòng)端兼容性極佳悲靴。

此方案劣勢(shì):

  1. 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));
}
  1. 語(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ì):

  1. 偽元素邊框?yàn)橐绯稣故镜乃砸O(shè)置 overflow:visible胳徽,否則你就只有一半的邊框了。
15257825853338.jpg
  1. 設(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;
        }
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市膜廊,隨后出現(xiàn)的幾起案子乏沸,更是在濱河造成了極大的恐慌,老刑警劉巖爪瓜,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蹬跃,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡铆铆,警方通過查閱死者的電腦和手機(jī)蝶缀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)薄货,“玉大人翁都,你說(shuō)我怎么就攤上這事×禄” “怎么了柄慰?”我有些...
    開封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)税娜。 經(jīng)常有香客問我坐搔,道長(zhǎng),這世上最難降的妖魔是什么敬矩? 我笑而不...
    開封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任概行,我火速辦了婚禮,結(jié)果婚禮上弧岳,老公的妹妹穿的比我還像新娘凳忙。我一直安慰自己,他們只是感情好禽炬,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開白布涧卵。 她就那樣靜靜地躺著,像睡著了一般腹尖。 火紅的嫁衣襯著肌膚如雪艺演。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天桐臊,我揣著相機(jī)與錄音胎撤,去河邊找鬼。 笑死断凶,一個(gè)胖子當(dāng)著我的面吹牛伤提,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播认烁,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼肿男,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼介汹!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起舶沛,我...
    開封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤嘹承,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后如庭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叹卷,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年坪它,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了骤竹。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡往毡,死狀恐怖蒙揣,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情开瞭,我是刑警寧澤懒震,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站嗤详,受9級(jí)特大地震影響挎狸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜断楷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望崭别。 院中可真熱鬧冬筒,春花似錦、人聲如沸茅主。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)诀姚。三九已至响牛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間赫段,已是汗流浹背呀打。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留糯笙,地道東北人贬丛。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像给涕,于是被迫代替她去往敵國(guó)和親豺憔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子额获,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 1 CALayer IOS SDK詳解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi閱讀 5,155評(píng)論 3 23
  • CSS參考手冊(cè) 一、初識(shí)CSS3 1.1 CSS是什么 CSS3在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能恭应。目前...
    沒汁帥閱讀 3,595評(píng)論 1 13
  • 1抄邀、屬性選擇器:id選擇器 # 通過id 來(lái)選擇類名選擇器 . 通過類名來(lái)選擇屬性選擇器 ...
    Yuann閱讀 1,637評(píng)論 0 7
  • 佳節(jié)將臨至,牽牽君子心昼榛。 明月日皎潔境肾,仆仆淚津津。 胸氣意未絕褒纲,志向楚天一准夷。 霸州成四海,五湖奔盛期莺掠。 若到當(dāng)時(shí)日...
    程石閱讀 256評(píng)論 0 2
  • 八月的第一天里衫嵌,逼著自己坐在電腦前碼字。再晚點(diǎn)記憶應(yīng)該就隨風(fēng)而逝了彻秆。 小四是我大學(xué)里認(rèn)識(shí)的基友加舍友楔绞。從大學(xué)入學(xué)開...
    黃水娣很二閱讀 634評(píng)論 1 2