溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css設(shè)置虛線邊框的方法是什么

發(fā)布時(shí)間：2020-08-31 13:45:32 來(lái)源：億速云 閱讀：219 作者：小新 欄目：web開發(fā)

小編給大家分享一下css設(shè)置虛線邊框的方法是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

首先我們應(yīng)該知道css的border為邊框?qū)傩?，可以?shí)現(xiàn)對(duì)象邊框的效果，像是設(shè)置邊框?qū)挾?、邊框顏色、邊框樣式（?shí)線還是虛線）等。

下面我們就來(lái)具體看看css的border邊框?qū)傩栽O(shè)置邊框虛線的方法

border中dotted跟dashed都是可以用來(lái)設(shè)置邊框虛線的，只是dashed設(shè)置長(zhǎng)方形點(diǎn)的虛線，而dotted設(shè)置正方形點(diǎn)的虛線。（相關(guān)推薦：css學(xué)習(xí)手冊(cè)）接下來(lái)我們就來(lái)分別看看兩種虛線邊框的實(shí)現(xiàn)代碼。

1、利用dashed設(shè)置虛線邊框

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        border: dashed;
    }
</style>
</head>
<body>
<div>虛線邊框</div>
</body>
</html>

虛線邊框效果如下：

css設(shè)置虛線邊框的方法是什么

如果你想將虛線邊框加上顏色和虛線邊框變細(xì)一點(diǎn)的話可以這樣做：

div{
        width: 100px;
        height: 100px;
    border: 2px dashed lightblue;
    }

虛線邊框效果就會(huì)變成如下所示：

css設(shè)置虛線邊框的方法是什么

2、利用dotted設(shè)置虛線邊框

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
    border: dotted;
    }    
</style>
</head>
<body>
<div>虛線邊框</div>
</body>
</html>

虛線邊框效果如下：

css設(shè)置虛線邊框的方法是什么

同樣的如果要改變一下上述虛線邊框的樣式可以改變代碼如下：

div{
        width: 100px;
        height: 100px;
    border: 2px dotted lightblue;
    }

虛線邊框效果如下：

css設(shè)置虛線邊框的方法是什么

以上是css設(shè)置虛線邊框的方法是什么的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手