border:0和border:none的區別是什麼

admin發表於2018-06-01
None

將物件的的邊框設定border:0和border:none的效果是一樣的，都可以將邊框取消。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width: 200px;
  height: 200px;
  border: 2px solid red;
  border-bottom: none;
  border-left: 0;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

以上程式碼的執行可以看出，通過將邊框設定為0或者none都可以取消邊框，從外觀上兩者是一樣的，但是還是有很大不同。border:0可以將邊框的寬度設定為零，儘管視覺上看不到了，但是瀏覽器還是會渲染的，border:none直接是沒有邊框，瀏覽器不會去渲染。所以說設定為none執行效果稍高一些，當然這個差距基本忽略不計。

相關文章