首頁 > 開發者 > CSS

css中border:0和border:none的區別詳解

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！


效能差異：

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

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

相容性差異：

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

【border:none;】當border為“none”時似乎對IE6/7無效邊框依然存在,如下

代碼

 代碼如下 複製代碼

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>borderl:none;與border:0;的區別</title>
<style type="text/css">
input,button{border:none;}
</style>
</head>

<body>

<h3>&lt;button&gt;</h3>
<button type="button">button</button>

<h3>&lt;input&gt;</h3>
<input name="" type="button" value="input button" />

<br /><br />
<input name="" type="text" value="input text" />

</body>
</html>

效果

 


注意在firebug中border:none和border:0的區別


下面舉個例子來具體說明下

 代碼如下 複製代碼


<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}
div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}
</style>


<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>
<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>

有興趣的朋友可以複製以上代碼在這個瀏覽器試一試：

測試結果：
1、.zerotest .setwidth
雖然定義了border-width:3px,但是border-style:none 所以無邊框(IE7會顯示3像素的邊框，這跟border:0解析有關。)
2、.zerotest .setstyle
雖然定義了border-style: dashed,但是border-width:0 所以無邊框
3、.nonetest .setwidth
雖然定義了border-width:3px,但是border-style:none 所以無邊框(IE7下無邊框)
4、.nonetest .setstyle
定義了border-style:dashed border-style為預設值medium border-color為預設值black 所以會顯示3像素黑色的虛線框(IE7下為一像素)

綜合1、4可以分析出在ie6、IE7下：
border:0 被解析為 border-width:0
border:none 被解析為 border-style:none

再來看看標準瀏覽器


border:0 比 border:none多渲染了一個border-width:0,也就是為什麼border:none的效能要比border:0高。border：none；被理解為關閉此標籤，設定為0，雖然不顯示，但是同樣占記憶體。

為了少渲染border-width:0，和不佔用記憶體，這裡我們寫一個相容所有瀏覽器的最優寫法：

border：0 none；前面的0是針對ie6和ie7的相容，後面的none是針對標準瀏覽器的。

測試了下border：0 none；和border：none 0；ie6和ie7效果一致，至於渲染的和佔用記憶體情況的利弊分析，有待進一步的分析測試，推薦用前者。


總結：

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

如何讓border:none;實現全相容？只需要在同一選擇符上添加背景屬性即可，如下例Demo3：

 代碼如下 複製代碼

<style type="text/css">
input,button{border:none;background:none;}
</style>

<h3>button</h3>
<button type="button">button</button>

<h3>input</h3>
<input name="" type="button" value="input button" />

<br /><br />
<input name="" type="text" value="input text" />

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
checkerboard border border format border types rectangle border retro border border doodle stationery border
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More