資訊專欄INFORMATION COLUMN
摘要：在端用的邊框線，看起來還好，但在手機端看起來就很難看了，而的分割線會有種精致的感覺。的縮放和旋轉(zhuǎn)默認都是按照元素的中心點來操作的元素在縮放之前尺寸就是紅框元素，縮放后，位置到了紅框中心，為了使之依然在左上角，縮放之前我們需進行的位移。
在PC端用1px的邊框線，看起來還好，但在手機端看起來就很難看了，而0.5px的分割線會有種精致的感覺。用普通寫法border:solid 0.5px red;iPhone可以正常顯示，android下幾乎所有的瀏覽器都會把0.5識別為0，即無邊框狀態(tài).
原理原理就是給需要加邊框的元素插入一個偽類，偽類采用絕對定位，然后對偽類添加1px邊框，最后進行0.5倍縮放。transform的縮放和旋轉(zhuǎn)默認都是按照元素的中心點來操作的
outline元素在縮放0.5之前尺寸就是紅框元素，縮放后，位置到了紅框中心，為了使之依然在左上角，縮放之前我們需進行l(wèi)eft：-50%；top：-50%的位移。
副作用HELLO WORLD
當用偽類的絕對定位來實現(xiàn)了邊框后，我們在first類和first-div類上的點擊事件會失效，因為此時的偽類是絕對定位，而且長寬等于父類元素的長寬，是脫離了文檔流覆蓋在父類上的，偽類不是真實的DOM元素，沒有js點擊事件
解決方案
再寫一個絕對定位元素，覆蓋在父元素上，層級優(yōu)先級要高一點
0.5px圓角邊框HELLO WORLD
0.5px左邊線HELLO WORLD
0.5px右邊線HELLO WORLD
0.5px底部線HELLO WORLD
HELLO WORLD
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116779.html
摘要：今天想寫的問題來自于網(wǎng)易一面的時候，面試官問我如何在移動端的頁面上畫一條的線。上面的結(jié)論我在端谷歌瀏覽器的設(shè)備模擬器里證實了有效，但是安卓和真機并沒有試過。 起因 最近一個月都在準備校招，所以沒什么時間寫博客。今天想寫的問題來自于網(wǎng)易一面的時候，面試官問我如何在移動端的頁面上畫一條1px的線。這個問題我模糊地記得之前看過相關(guān)文章，但是我清楚地記得當時自己腦子一片空白。是的，一面掛了，但...
摘要：這種使用簡單，但是兼容性不太好。這種顏色有陰影，估計過不了設(shè)計大佬的那關(guān)。最后會把對應的編譯出來，這種兼容性好，就是依賴于插件。這種兼容好，但是會和偽類沖突，也是我司采用的方式。 前言 工作以后，大部分的業(yè)務工作都是基于移動端H5的，開發(fā)過程中學習了很多東西，遇到過許多問題，諸如rememcss pxdevice px等，本文純屬個人的歸納總結(jié)，如有問題，請指出親噴~ PC端 本文主要...
摘要：這種使用簡單，但是兼容性不太好。這種顏色有陰影，估計過不了設(shè)計大佬的那關(guān)。最后會把對應的編譯出來，這種兼容性好，就是依賴于插件。這種兼容好，但是會和偽類沖突，也是我司采用的方式。 前言 工作以后，大部分的業(yè)務工作都是基于移動端H5的，開發(fā)過程中學習了很多東西，遇到過許多問題，諸如rememcss pxdevice px等，本文純屬個人的歸納總結(jié)，如有問題，請指出親噴~ PC端 本文主要...
問題提出 這是一個比較老的問題了，我第一次注意到的時候，是UI設(shè)計師來找我麻煩，emmm那時候我才初入前端職場，啥也不懂啊啊啊啊啊，情形是這樣的：設(shè)計師拿著手機過來：這些邊框都粗了啊，我的設(shè)計稿上是1px的我：？？？？我寫的是1px呀，不信你看。（說著拿出了css代碼設(shè)計師：不對啊我眼睛看來這個邊框比我設(shè)計稿上粗很多，看起來好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（邊說邊改了代碼...
閱讀 3809·2021-11-12 10:34
閱讀 2824·2021-09-22 15:14
閱讀 793·2019-08-30 15:53
閱讀 3207·2019-08-30 12:53
閱讀 1296·2019-08-29 18:32
閱讀 2775·2019-08-29 16:41
閱讀 1071·2019-08-26 13:40
閱讀 1816·2019-08-23 18:07
