css3寫出0 5px的邊框

2021-10-07 04:08:30 字數 763 閱讀 4744

一說到0.5px的邊框,我們一般認為是不行的,因為在ps中0.5px的線也是做不出來的,這個計算機的畫素有關係。

廢話不多說了,0.5px 其實用的是css3新特性,box-shadow:陰影設定

**

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

head

>

<

body

>

<

div

style

="margin-top: 10px;border:1px solid #f00;width: 100px; height: 20px;"

>1px 紅色的邊框

div>

<

div

style

="margin-top: 10px;width: 100px;height: 20px;box-shadow:0.5px 0.5px #f00 ,0.5px 0.5px #f00 inset"

>

0.5px 紅色的邊框

div>

body

>

html

>

實現0 5px的邊

如果我們直接設定0.5px,我們看到不同系統的不同瀏覽器對小數點的px有不同的處理。所以如果我們把單位設定成小數的px包括寬高等,其實不太可靠,因為不同瀏覽器表現不一樣。第二種能想到的方法是縮放,能否設定1px,然後scale 0.5呢,我們可以嘗試一下,大部分瀏覽器都變虛了,只有firefox比較...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...