css怎麼設定邊框的虛線樣式? (程式碼實例)

青灯夜游
發布: 2018-10-31 16:42:26
原創
6601 人瀏覽過

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

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

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

html程式碼:

这是一段测试文字1,实现虚线边框

这是一段测试文字2,实现虚线边框

登入後複製

css程式碼:

.p1 { border: 5px dashed #009999; padding: 10px; } .p2 { border: 5px dotted; border-color: linear-gradient(to right, red, yellow, blue); padding: 10px;
登入後複製

效果圖:

css怎麼設定邊框的虛線樣式? (程式碼實例)

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

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

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

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

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

相關建議:

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!