CSS中設定border屬性為0與none的區別

2021-08-09 02:22:29 字數 1081 閱讀 9692

在我們設定css的時候,對標籤元素不設定邊框屬性或者取消邊框屬性一般設定為:border:none;或border:0;兩種方法均可。

border:none;與border:0;的區別體現有兩點:一是理論上的效能差異;二是瀏覽器相容性的差異。

1.效能差異

【border:0;】把border設為「0」畫素雖然在頁面上看不見,但按border預設值理解,瀏覽器依然對border-width/border-color進行了渲染,即已經占用了記憶體值。

【border:none;】把border設為「none」即沒有,瀏覽器解析「none」時將不作出渲染動作,即不會消耗記憶體值。

2.相容性差異

相容性差異只針對瀏覽器ie6、ie7與標籤button、input而言,在win、win7、vista 的xp主題下均會出現此情況。

【border:none;】當border為「none」時似乎對ie6/7無效邊框依然存在,如下例

【border:0;】當border為「0」時,感覺比「none」更有效,所有瀏覽器都一致把邊框隱藏

總結:1. 對比border:0;與border:none;之間的區別在於有渲染和沒渲染,感覺他們和display:none;與 visibility:hidden;的關係類似,而對於border屬性的渲染效能對比暫時沒找測試的方法,雖然認為他們存在渲染效能上的差異但也只能 說是理論上。

2. 如何讓border:none;實現全相容?只需要在同一選擇符上新增背景屬性即可

對於border:0;與border:none;個人更向於使用,border:none;,因為border:none;畢竟在效能消耗沒有爭議,而且相容性可用背景屬性解決不足以成為障礙。

css中的border屬性。。。。。

1.border color 邊框的顏色 一般設定邊框都有3個屬性 寬度 線的樣式 顏色,如果寬度設定了很多px,那麼就可以給邊框設定很多顏色,讓邊框顯示出漸變的效果,不過設定邊框不同顏色時只能通過border bottom colors,border top colors,border left ...

5 css中的border屬性

zh child 複製 border 簡寫屬性在乙個宣告設定所有的邊框屬性。border 1px solid 000 可拆分為border width 1px 寬度border style solid 樣式 實線 border color 000 顏色 可以看到,寬度 顏色 樣式這個三個屬性的屬性值...

CSS屬性 盒子模型 border屬性

border 表示盒子的邊框 分為四個方向 top 上面 right 右面 bottom 下面 left 左面 取值方式 border top border right border bottom border left 每個邊都包含三種屬性 color 顏色 width 粗細 style 樣式 寫...