国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

總結(jié)一下各種0.5px的線

whinc / 787人閱讀

摘要：在端用的邊框線，看起來還好，但在手機(jī)端看起來就很難看了，而的分割線會(huì)有種精致的感覺。的縮放和旋轉(zhuǎn)默認(rèn)都是按照元素的中心點(diǎn)來操作的元素在縮放之前尺寸就是紅框元素，縮放后，位置到了紅框中心，為了使之依然在左上角，縮放之前我們需進(jìn)行的位移。

在PC端用1px的邊框線，看起來還好，但在手機(jī)端看起來就很難看了，而0.5px的分割線會(huì)有種精致的感覺。用普通寫法border:solid 0.5px red;iPhone可以正常顯示，android下幾乎所有的瀏覽器都會(huì)把0.5識(shí)別為0，即無邊框狀態(tài).

原理

原理就是給需要加邊框的元素插入一個(gè)偽類，偽類采用絕對(duì)定位，然后對(duì)偽類添加1px邊框，最后進(jìn)行0.5倍縮放。transform的縮放和旋轉(zhuǎn)默認(rèn)都是按照元素的中心點(diǎn)來操作的
outline元素在縮放0.5之前尺寸就是紅框元素，縮放后，位置到了紅框中心，為了使之依然在左上角，縮放之前我們需進(jìn)行l(wèi)eft：-50%；top：-50%的位移。

0.5px邊框 

  

    HELLO WORLD
副作用

當(dāng)用偽類的絕對(duì)定位來實(shí)現(xiàn)了邊框后，我們?cè)趂irst類和first-div類上的點(diǎn)擊事件會(huì)失效，因?yàn)榇藭r(shí)的偽類是絕對(duì)定位，而且長(zhǎng)寬等于父類元素的長(zhǎng)寬，是脫離了文檔流覆蓋在父類上的，偽類不是真實(shí)的DOM元素，沒有js點(diǎn)擊事件

解決方案

再寫一個(gè)絕對(duì)定位元素，覆蓋在父元素上，層級(jí)優(yōu)先級(jí)要高一點(diǎn)


  

    HELLO WORLD
0.5px圓角邊框 

  

    HELLO WORLD
0.5px左邊線 

  

    HELLO WORLD
0.5px右邊線 

  

    HELLO WORLD
0.5px底部線 

  

    HELLO WORLD

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

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

相關(guān)文章

  • 談一談移動(dòng)端1px的問題

    摘要：今天想寫的問題來自于網(wǎng)易一面的時(shí)候，面試官問我如何在移動(dòng)端的頁(yè)面上畫一條的線。上面的結(jié)論我在端谷歌瀏覽器的設(shè)備模擬器里證實(shí)了有效，但是安卓和真機(jī)并沒有試過。 起因 最近一個(gè)月都在準(zhǔn)備校招，所以沒什么時(shí)間寫博客。今天想寫的問題來自于網(wǎng)易一面的時(shí)候，面試官問我如何在移動(dòng)端的頁(yè)面上畫一條1px的線。這個(gè)問題我模糊地記得之前看過相關(guān)文章，但是我清楚地記得當(dāng)時(shí)自己腦子一片空白。是的，一面掛了，但...

    qianfeng 評(píng)論0 收藏0

  • Css-移動(dòng)端適配總結(jié)

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

    codeGoogle 評(píng)論0 收藏0

  • Css-移動(dòng)端適配總結(jié)

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

    whinc 評(píng)論0 收藏0

  • 移動(dòng)端H5頁(yè)面中1px邊框的幾種解決方法

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

    enda 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<