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

資訊專欄INFORMATION COLUMN

總結一下各種0.5px的線

whinc / 777人閱讀

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

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

原理

原理就是給需要加邊框的元素插入一個偽類,偽類采用絕對定位,然后對偽類添加1px邊框,最后進行0.5倍縮放。transform的縮放和旋轉默認都是按照元素的中心點來操作的
outline元素在縮放0.5之前尺寸就是紅框元素,縮放后,位置到了紅框中心,為了使之依然在左上角,縮放之前我們需進行left:-50%;top:-50%的位移

0.5px邊框
HELLO WORLD
副作用

當用偽類的絕對定位來實現了邊框后,我們在first類和first-div類上的點擊事件會失效,因為此時的偽類是絕對定位,而且長寬等于父類元素的長寬,是脫離了文檔流覆蓋在父類上的,偽類不是真實的DOM元素,沒有js點擊事件

解決方案

再寫一個絕對定位元素,覆蓋在父元素上,層級優先級要高一點

HELLO WORLD
0.5px圓角邊框
HELLO WORLD
0.5px左邊線
HELLO WORLD
0.5px右邊線
HELLO WORLD
0.5px底部線
HELLO WORLD

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116779.html

相關文章

  • 談一談移動端1px的問題

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

    qianfeng 評論0 收藏0
  • Css-移動端適配總結

    摘要:這種使用簡單,但是兼容性不太好。這種顏色有陰影,估計過不了設計大佬的那關。最后會把對應的編譯出來,這種兼容性好,就是依賴于插件。這種兼容好,但是會和偽類沖突,也是我司采用的方式。 前言 工作以后,大部分的業務工作都是基于移動端H5的,開發過程中學習了很多東西,遇到過許多問題,諸如rememcss pxdevice px等,本文純屬個人的歸納總結,如有問題,請指出親噴~ PC端 本文主要...

    codeGoogle 評論0 收藏0
  • Css-移動端適配總結

    摘要:這種使用簡單,但是兼容性不太好。這種顏色有陰影,估計過不了設計大佬的那關。最后會把對應的編譯出來,這種兼容性好,就是依賴于插件。這種兼容好,但是會和偽類沖突,也是我司采用的方式。 前言 工作以后,大部分的業務工作都是基于移動端H5的,開發過程中學習了很多東西,遇到過許多問題,諸如rememcss pxdevice px等,本文純屬個人的歸納總結,如有問題,請指出親噴~ PC端 本文主要...

    whinc 評論0 收藏0
  • 移動端H5頁面中1px邊框的幾種解決方法

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

    enda 評論0 收藏0

發表評論

0條評論

whinc

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<