css怎麼設定邊框的虛線樣式？ （程式碼實例）

在網頁版面中，有時為了整體網頁的美觀，我們需要設定不同的邊框樣式。那要怎麼設定邊框的虛線樣式呢？本篇文章就跟大家介紹css設定邊框虛線樣式的兩種方式。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

首先要知道在css中我們是使用border屬性來設定邊框的，它可以透過設定邊框的寬度、顏色、圓角度、樣式（實線、虛線、雙線等等）。

下面我們透過簡單的程式碼範例來具體看看css的border邊框屬性是怎麼設定邊框虛線的。

html程式碼：

<div class="demo">
	<p class="p1">这是一段测试文字1，实现虚线边框</p>
	<p class="p2">这是一段测试文字2，实现虚线边框</p>

</div>

css程式碼：

	.p1 {
	border: 5px dashed #009999;
	padding: 10px;
}

.p2 {
	border: 5px dotted;
	border-color: linear-gradient(to right, red, yellow, blue);
	padding: 10px;

效果圖：

##我們可以看出，css border邊框屬性可以設定兩種不同的邊框的虛線樣式，分別是透過border邊框屬性中dotted跟dashed兩個屬性值設定的。下面我們來看看 border設定這兩個屬性值的效果：

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

dotted值：定義點狀邊框，使得邊框呈現連續的點狀，進而實現邊框的點狀虛線樣式。

附註：所有瀏覽器都支援 border屬性，不用擔心相容性。

總結：以上就是這篇文章所介紹的兩種css設定邊框虛線樣式的方式，大家可以自己動手試試，根據需要使用不同的虛線樣式，希望能對大家的學習有所幫助。

相關建議：

css如何設定邊框的圓角樣式？ border-radius屬性設定圓角樣式

css如何去掉重疊部分的邊框？

以上是css怎麼設定邊框的虛線樣式？ （程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！