總結一下各種0 5px的線

2022-08-05 12:39:13 字數 807 閱讀 5993

在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%的位移

hello world

當用偽類的絕對定位來實現了邊框後,我們在first類和first-div類上的點選事件會失效,因為此時的偽類是絕對定位,而且長寬等於父類元素的長寬,是脫離了文件流覆蓋在父類上的,偽類不是真實的dom元素,沒有js點選事件再寫一個絕對定位元素,覆蓋在父元素上,層級優先順序要高一點

hello world

hello world

hello world

hello world

hello world

本文**於:猿2048→