css如何設(shè)置邊框的虛線樣式

這篇文章主要為大家展示了“css如何設(shè)置邊框的虛線樣式”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css如何設(shè)置邊框的虛線樣式”這篇文章吧。

　　首先要知道在css中我們是使用border屬性來(lái)設(shè)置邊框的，它可以通過(guò)設(shè)置邊框的寬度、顏色、圓角度、樣式（實(shí)線、虛線、雙線等等）。

　　html代碼：

　　<divclass="demo">

　　<pclass="p1">這是一段測(cè)試文字1，實(shí)現(xiàn)虛線邊框</p>

　　<pclass="p2">這是一段測(cè)試文字2，實(shí)現(xiàn)虛線邊框</p>

　　</div>

　　css代碼：

　　.p1{

　　border:5pxdashed#009999;

　　padding:10px;

　　}

　　.p2{

　　border:5pxdotted;

　　border-color:linear-gradient(toright,red,yellow,blue);

　　padding:10px;

　　效果圖：

　　我們可以看出，cssborder邊框?qū)傩钥梢栽O(shè)置兩種不同的邊框的虛線樣式，分別是通過(guò)border邊框?qū)傩灾衐otted跟dashed兩個(gè)屬性值設(shè)置的。下面我們來(lái)看看border設(shè)置這兩個(gè)屬性值的效果：

　　dashed值：可以定義虛線，這樣邊框就可以呈現(xiàn)扁狀的虛線樣式。

　　dotted值：定義點(diǎn)狀邊框，使得邊框呈現(xiàn)連續(xù)的點(diǎn)狀，進(jìn)而實(shí)現(xiàn)邊框的點(diǎn)狀虛線樣式。

　　注：所有瀏覽器都支持border屬性，不用擔(dān)心兼容性。

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