首頁 > web前端 > css教學 > css邊框線怎麼設定

css邊框線怎麼設定

清浅
發布: 2020-09-14 15:40:05
原創
30346 人瀏覽過

設定css邊框線的方法:可以透過border-style屬性來設定邊框線。 border-style屬性可以設定成點狀、虛線、實線、3D凹槽邊框、壟斷邊框、3Dinset邊框等。

css邊框線怎麼設定

【建議課程:CSS教學

設定css邊框線的方法:

邊框樣式border-style

#此屬性是用來設定元素所有邊框的樣式,或是單獨地為各邊設定邊框樣式

邊框樣式有下列幾種:

  • none:不定義邊框,即無邊框    

  • dotted :邊框樣式為點狀邊框

  • dashed :邊框樣式為虛線   

  • solid:邊框樣式為實線,在大多數瀏覽器中呈現為實線。      

  • double:邊框樣式為雙線。雙線的寬度等於 border-width 的值。   

  • groove:邊框樣式為 3D 凹槽邊框,它的效果取決於 border-color 的值。   

  • ridge :邊框樣式為獨佔邊框,它的效果取決於 border-color 的值。   

  • inset:邊框樣式為3D inset 邊框,它的效果取決於 border-color 的值。   

  • outset :邊框樣式為 3D outset 邊框,它的效果取決於 border-color 的值。   

  • inherit:邊框樣式為應該從父元素繼承邊框樣式。

案例:

設定邊框的上邊為點狀,下邊為虛線,左右兩邊為實線

div{
			width:100px;
			height: 100px;
			border-style: dotted solid dashed solid;
			border-color: pink;
		}
登入後複製

效果圖如下:

css邊框線怎麼設定

設定邊框為3D 凹槽與壟斷邊框

<style type="text/css">
		.box1{
			width:100px;
			height:30px;
			border:5px groove pink;
			margin-bottom: 5px;

		}
		.box2{
			width:100px;
			height:30px;
			border:5px ridge  pink;

		}
	</style>
</head>
<body>
	<div class="box1">3D 凹槽边框</div>
	<div class="box2">垄状边框</div>
</body>
登入後複製

效果圖

css邊框線怎麼設定

總結:以上就是這篇文章的全部內容了,希望對大家對學習邊框樣式有所幫助。

以上是css邊框線怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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