css邊框線怎麼設定
- 清浅原創
- 2018-12-11 16:55:2730332瀏覽
設定css邊框線的方法：可以透過border-style屬性來設定邊框線。 border-style屬性可以設定成點狀、虛線、實線、3D凹槽邊框、壟斷邊框、3Dinset邊框等。
【建議課程：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;
}效果圖如下：
設定邊框為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邊框線怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS中常見自適應佈局有哪些下一篇：CSS中常見自適應佈局有哪些