溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹設置css邊框線的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
CSS中的邊框線可以通過border-style屬性來設置，它可以設置成點狀，虛線，實線，3D 凹槽邊框、壟狀邊框、3D inset 邊框等等
邊框樣式：
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邊框線的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
