首頁 > web前端 > 前端問答 > html div邊框線怎麼設置

html div邊框線怎麼設置

青灯夜游
發布: 2023-01-03 09:28:35
原創
20120 人瀏覽過

html div元素邊框線可以使用border相關屬性來設定:1、border屬性同時設定上下左右邊框樣式;2、border-top、border-bottom、border-left和border-right屬性分別設定上下左右邊框樣式。

html div邊框線怎麼設置

本教學操作環境: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>
登入後複製

效果圖:

html div邊框線怎麼設置

【推薦教學:CSS影片教學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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板