移動(dòng)端比1px還小的border

stdying 發(fā)布于2019-08-20 18:32 / 750人閱讀

摘要：巧用在移動(dòng)端經(jīng)常出現(xiàn)細(xì)邊框但有的時(shí)候產(chǎn)品大大甚至乎會(huì)覺(jué)得不夠細(xì)那么要如何寫(xiě)出比還要小的下面是代碼希望對(duì)大家有所幫助

巧用border

在移動(dòng)端經(jīng)常出現(xiàn)border,細(xì)邊框
但有的時(shí)候產(chǎn)品大大1px甚至乎會(huì)覺(jué)得不夠細(xì)
那么要如何寫(xiě)出比1px還要小的border
下面是代碼希望對(duì)大家有所幫助

.thinner-border {
    position: relative;
    width: 1px;
    margin:14px 0;
    height: 20px;
}
.thinner-border:after {
    content: "";
    position: absolute;
    width: 500%;
    height: 500%;
    border: 1px solid #ffd000;
    transform-origin: 0 0;
    transform: scale(0.2, 0.2);
    box-sizing: border-box;
}

云服務(wù)器 GPU云服務(wù)器還小小的sql數(shù)據(jù)庫(kù) 超小的云服務(wù)器 border

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84657.html

相關(guān)文章

移動(dòng)端比1px還小的border

摘要：巧用在移動(dòng)端經(jīng)常出現(xiàn)細(xì)邊框但有的時(shí)候產(chǎn)品大大甚至乎會(huì)覺(jué)得不夠細(xì)那么要如何寫(xiě)出比還要小的下面是代碼希望對(duì)大家有所幫助巧用border 在移動(dòng)端經(jīng)常出現(xiàn)border,細(xì)邊框但有的時(shí)候產(chǎn)品大大1px甚至乎會(huì)覺(jué)得不夠細(xì)那么要如何寫(xiě)出比1px還要小的border下面是代碼希望對(duì)大家有所幫助 .thinner-border { position: relative; wi...

X_AirDu 2019-08-01 17:20 評(píng)論0 收藏0
移動(dòng)端比1px還小的border

摘要：巧用在移動(dòng)端經(jīng)常出現(xiàn)細(xì)邊框但有的時(shí)候產(chǎn)品大大甚至乎會(huì)覺(jué)得不夠細(xì)那么要如何寫(xiě)出比還要小的下面是代碼希望對(duì)大家有所幫助巧用border 在移動(dòng)端經(jīng)常出現(xiàn)border,細(xì)邊框但有的時(shí)候產(chǎn)品大大1px甚至乎會(huì)覺(jué)得不夠細(xì)那么要如何寫(xiě)出比1px還要小的border下面是代碼希望對(duì)大家有所幫助 .thinner-border { position: relative; wi...

yanwei 2019-08-29 13:06 評(píng)論0 收藏0
移動(dòng)端H5頁(yè)面中1px邊框的幾種解決方法

問(wèn)題提出這是一個(gè)比較老的問(wèn)題了，我第一次注意到的時(shí)候，是UI設(shè)計(jì)師來(lái)找我麻煩，emmm那時(shí)候我才初入前端職場(chǎng)，啥也不懂啊啊啊啊啊，情形是這樣的：設(shè)計(jì)師拿著手機(jī)過(guò)來(lái)：這些邊框都粗了啊，我的設(shè)計(jì)稿上是1px的我：？？？？我寫(xiě)的是1px呀，不信你看。（說(shuō)著拿出了css代碼設(shè)計(jì)師：不對(duì)啊我眼睛看來(lái)這個(gè)邊框比我設(shè)計(jì)稿上粗很多，看起來(lái)好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（邊說(shuō)邊改了代碼...

enda 2019-08-29 16:07 評(píng)論0 收藏0
移動(dòng)端H5頁(yè)面中1px邊框的幾種解決方法

問(wèn)題提出這是一個(gè)比較老的問(wèn)題了，我第一次注意到的時(shí)候，是UI設(shè)計(jì)師來(lái)找我麻煩，emmm那時(shí)候我才初入前端職場(chǎng)，啥也不懂啊啊啊啊啊，情形是這樣的：設(shè)計(jì)師拿著手機(jī)過(guò)來(lái)：這些邊框都粗了啊，我的設(shè)計(jì)稿上是1px的我：？？？？我寫(xiě)的是1px呀，不信你看。（說(shuō)著拿出了css代碼設(shè)計(jì)師：不對(duì)啊我眼睛看來(lái)這個(gè)邊框比我設(shè)計(jì)稿上粗很多，看起來(lái)好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（邊說(shuō)邊改了代碼...

shengguo 2019-08-26 17:41 評(píng)論0 收藏0
Css-移動(dòng)端適配總結(jié)

摘要：這種使用簡(jiǎn)單，但是兼容性不太好。這種顏色有陰影，估計(jì)過(guò)不了設(shè)計(jì)大佬的那關(guān)。最后會(huì)把對(duì)應(yīng)的編譯出來(lái)，這種兼容性好，就是依賴于插件。這種兼容好，但是會(huì)和偽類沖突，也是我司采用的方式。前言工作以后，大部分的業(yè)務(wù)工作都是基于移動(dòng)端H5的，開(kāi)發(fā)過(guò)程中學(xué)習(xí)了很多東西，遇到過(guò)許多問(wèn)題，諸如rememcss pxdevice px等，本文純屬個(gè)人的歸納總結(jié)，如有問(wèn)題，請(qǐng)指出親噴~ PC端本文主要...

codeGoogle 2019-08-23 16:47 評(píng)論0 收藏0