CSS border邊框

admin發表於2018-08-03
CSS

一個元素在四個方位有四個邊框，在實際應用中，可能需要對邊框進行修飾。

CSS提供了border屬性，可以統一設定四個邊框的樣式，也可以單獨設定其中某一個邊框的樣式。

邊框圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/21/111001tq1klzhbfp2b0qev.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

語法結構：

[CSS] 純文字檢視 複製程式碼
border:[ border-width ] || [ border-style ] || [ border-color ]

引數解析：

（1）.border-width：設定元素的邊框寬度 

（2）.border-style：設定元素的邊框樣式，值可以是solid和dotted等。 

（3）.border-color：設定元素的邊框顏色。

程式碼例項:

[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:50px;
  border:1px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

border是一個複合屬性，所謂複合屬性就是一個屬性有多個屬性值，分別設定元素不同的屬性特徵。

上面程式碼就是通過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:50px;
  border-width:1px;
  border-style:solid;
  border-color:blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

單獨設定某方位邊框:

上面介紹的都是同時設定四個邊框的樣式，也可以單獨設定某一個方位的邊框。

（1）.border-top:定義上邊框。

（2）.border-right:定義右邊框。

（3）.border-bottom:定義下邊框。

（4）.border-left:定義左邊框。

四個屬性的語法結構和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:50px;
  border-top:1px solid blue;
  border-right:1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面程式碼演示了分別設定上邊框和有邊框的樣式。

相關文章