溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css設置虛線邊框的方法是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
首先我們應該知道css的border為邊框屬性，可以實現對象邊框的效果，像是設置邊框寬度、邊框顏色、邊框樣式（實線還是虛線）等。
下面我們就來具體看看css的border邊框屬性設置邊框虛線的方法
border中dotted跟dashed都是可以用來設置邊框虛線的，只是dashed設置長方形點的虛線，而dotted設置正方形點的虛線。（相關推薦：css學習手冊）接下來我們就來分別看看兩種虛線邊框的實現代碼。
1、利用dashed設置虛線邊框
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: dashed;
}
</style>
</head>
<body>
<div>虛線邊框</div>
</body>
</html>虛線邊框效果如下：
如果你想將虛線邊框加上顏色和虛線邊框變細一點的話可以這樣做：
div{
width: 100px;
height: 100px;
border: 2px dashed lightblue;
}虛線邊框效果就會變成如下所示：
2、利用dotted設置虛線邊框
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: dotted;
}
</style>
</head>
<body>
<div>虛線邊框</div>
</body>
</html>虛線邊框效果如下：
同樣的如果要改變一下上述虛線邊框的樣式可以改變代碼如下：
div{
width: 100px;
height: 100px;
border: 2px dotted lightblue;
}虛線邊框效果如下：
以上是css設置虛線邊框的方法是什么的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
