html div邊框線怎麼設置
- 青灯夜游原創
- 2021-03-09 13:52:2520091瀏覽
html div元素邊框線可以使用border相關屬性來設定：1、border屬性同時設定上下左右邊框樣式；2、border-top、border-bottom、border-left和border-right屬性分別設定上下左右邊框樣式。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS邊框屬性可讓你指定一個元素邊框的樣式和顏色。
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
width: 250px;
margin: 50px 0px;
padding: 20px 10px;
}
.box1{
border: 1px solid red;
}
.box2{
border-top: 1px solid green;
}
.box3{
border-bottom: 1px solid green;
}
.box4{
border-left: 1px solid green;
}
.box5{
border-right: 1px solid green;
}
</style>
</head>
<body>
<div class="box1">border属性设置使用边框样式</div>
<div class="box2">border-top属性设置上边框样式</div>
<div class="box3">border-bottom属性设置下边框样式</div>
<div class="box4">border-left属性设置左边框样式</div>
<div class="box5">border-right属性设置右边框样式</div>
</body>
</html>效果圖：
CSS邊框屬性
| > | 描述 |
|---|---|
| border | 簡寫屬性，用來把針對四個邊的屬性設定在一個宣告。 |
| border-style | 用來設定元素所有邊框的樣式，或是單獨設定邊框樣式。 |
| border-width | 簡單寫屬性，用於為元素的所有邊框設定寬度，或單獨地為各邊邊框設定寬度。 |
| border-color | 簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。 |
| border-bottom | 簡寫屬性，用來把下邊框的所有屬性設定到一個宣告中。 |
| border-bottom-color | 設定元素的下邊框的顏色。 |
| border-bottom-style | 設定元素的下邊框的樣式。 |
| border-bottom-width | 設定元素的下邊框的寬度。 |
| border-left | 簡寫屬性，用來把左邊框的所有屬性設定到一個宣告中。 |
| border-left-color | 設定元素的左邊框的顏色。 |
| border-left-style | 設定元素的左邊框的樣式。 |
| border-left-width | 設定元素的左邊框的寬度。 |
| border-right | 簡寫屬性，用來把右邊框的所有屬性設定到一個宣告中。 |
| border-right-color | 設定元素的右邊框的顏色。 |
| border-right-style | 設定元素的右邊框的樣式。 |
| border-right-width | 設定元素的右邊框的寬度。 |
| border-top | 簡寫屬性，用來把上邊框的所有屬性設定到一個宣告中。 |
| border-top-color | #設定元素的上邊框的顏色。 |
| border-top-style | 設定元素的上邊框的樣式。 |
| border-top-width | 設定元素的上邊框的寬度。 |
更多程式相關知識，請造訪：程式設計影片！ ！
以上是html div邊框線怎麼設置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn