css border屬性簡單介紹

admin發表於2017-03-01
CSS
border屬性是css中最為常用的屬性之一，下面就通過程式碼例項簡單介紹一下它的用法。

此屬性可以設定元素的邊框，程式碼如下:

[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:100px; 
  height:100px;
  border:5px solid red;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上程式碼可以講div的邊框樣式。從上面的程式碼可以看出border是個複合屬性，所謂複合屬性就是一次性可以設定邊框的多個屬性，比如設定了邊框的厚度，邊框的型別和邊框的顏色。上面你的程式碼會將所有的邊框設定為相同的樣式，有時候我們需要單獨設定邊框的屬性，程式碼如下:

[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:100px; 
  height:100px;
  border-top:5px solid red;
  border-right:15px solid blue;
  border-bottom:20px solid green;
  border-left:5px solid black;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上程式碼可以單獨設定每一個邊框的樣式。

在上面的例項程式碼都是採用的複合屬性，當然我們也可以分開寫:

[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:100px; 
  height:100px;
  border-width:5px;
  border-style:solid;
  border-color:red;
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上程式碼就是單獨設定，當然在分別設定各個邊框樣式的時候也是如此。

相關文章