實現0 5px的邊

2021-10-22 02:56:51 字數 517 閱讀 8981

如果我們直接設定0.5px,我們看到不同系統的不同瀏覽器對小數點的px有不同的處理。所以如果我們把單位設定成小數的px包括寬高等,其實不太可靠,因為不同瀏覽器表現不一樣。

第二種能想到的方法是縮放,能否設定1px,然後scale 0.5呢,我們可以嘗試一下,大部分瀏覽器都變虛了,只有firefox比較完美看起來是實的而且還很細,效果和直接設定0.5px一樣。所以通過transform: scale會導致線變虛了,而粗細幾乎沒有變化。但是如果加上transform-origin: 50% 100%:大家就都變實了,很完美

移動端的時候還使用了rem做縮放,但實際上rem的縮放最後還是會轉化成px,所以和直接使用0.5px的方案是一樣的

用線性漸變linear-gradient,白色漸變成黑色,這種方法在各個流覽器上面都不完美,效果都是虛的,和完美的0.5px還是有差距。這個效果和scale 0.5的差不多,都是通過虛化線,讓人覺得變細了。

用box-shadow,陰影垂直方向的偏移為0.5px,部分瀏覽器不支援小於1px的boxshadow,會不顯示。

畫一條0 5px的邊

1.scale方法 2.線性漸變linear gradient,流覽器上面都不完美,效果都是虛的,和完美的0.5px還是有差距 3.使用boxshadow 4.使用svg 二.幾種效果 svgbox shadow 0 0.5px 0 000 linear gradient 0deg,fff,000 ...

怎麼在高清屏上畫一條0 5px的邊

怎麼在高清屏上畫一條0.5px的邊呢?0.5px相當於高清屏物理畫素的1px。這樣的目的是在高清屏上看起來會更細一點,效果會更好一點,例如更細的分隔線。理論上px的最小單位是1,但是會有幾個特例,高清屏的顯示就是乙個特例。高清屏確實可以畫0.5px,對比效果如下 在pc上的不同瀏覽器上測試測試結果如...

css3寫出0 5px的邊框

一說到0.5px的邊框,我們一般認為是不行的,因為在ps中0.5px的線也是做不出來的,這個計算機的畫素有關係。廢話不多說了,0.5px 其實用的是css3新特性,box shadow 陰影設定 doctype html html head meta charset utf 8 title titl...