跟大家講解下有關CSS虛線樣式的制作方法及虛線樣式的運用實例，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說CSS虛線樣式的制作方法及虛線樣式的運用實例，小編也收集到了有關CSS虛線樣式的制作方法及虛線樣式的運用實例的相關資料，希望大家看到了會喜歡。
在頁面布局時，為了呈現一定的效果，經常需要使用CSS虛線樣式，但是很多人新手對CSS虛線樣式還比較陌生，這篇文章就和大家講講，如何使用CSSborder屬性制作虛線樣式，以及CSS虛線樣式的一些運用實例。比如：CSS虛線邊框的運用，CSS虛線下邊框的運用，一條虛線的運用等等。有需要的小伙伴可以參考一下。一、CSS虛線的制作方法
border-style 屬性可以設置一個元素的四個邊框的樣式， 它的常用屬性值如下：dotted ：點狀，在大多數瀏覽器中呈現為實線dashed ：虛線，在大多數瀏覽器中呈現為實線solid ：定義實線none：無邊框double：雙線CSS虛線樣式的實現就是用的屬性值dashed，dotted。
border-style屬性可以設置一個值，兩個值，三個值，四個值，他們代表的意思如下：1、border-style:dotted solid double dashed表示上邊框是點狀，右邊框是實線，下邊框是雙線，左邊框是虛線2、border-style:dotted solid double表示上邊框是點狀，右邊框和左邊框是實線，下邊框是雙線3、border-style:dotted solid表示上邊框和下邊框是點狀，右邊框和左邊框是實線4、border-style:dotted表示所有4個邊框都是點狀
邊框的寫法： border:border-width, border-style,border-color 。所以，寬度為1px的黑色虛線可以這樣寫 border:1px dashed #000;
二、CSS虛線的運用實例
1、CSS虛線邊框
<style type="text/css"> div{border: 1px dashed #000;} </style> <body> <div>生活不止眼前的茍且，還有詩和遠方的田野</div> </body>效果圖：
2、li列表虛線分割，即CSS虛線下邊框
頁面中用css li標簽布局的也比較多，每行li下邊用虛線將內容分開，用border-bottom來實現。
<style type="text/css"> li{border-bottom: 1px dashed #000;} </style> <body> <ul> <li>have a nice day </li> <li>have a nice day </li> <li>have a nice day </li> <li>have a nice day </li> <li>have a nice day </li> <li>have a nice day </li> <li>have a nice day </li> </ul> </body>效果圖：
3、CSS一條水平虛線，用hr 標簽，然后對hr標簽添加樣式，border: 1px dotted #FF0000
<hr style="border: 1px dotted #FF0000;">效果圖：
4、超鏈接虛線下劃線，用border-bottom: 1px dashed #FF0000，對a標簽中的內容進行強調。
<style type="text/css"> a{text-decoration: none;border-bottom: 1px dashed #FF0000;}</style> <body> <div>歡迎大家來<a href="#">PHP中文網</a>學習知識</div> </body>效果圖：
以上介紹了CSS虛線樣式的制作方法，以及虛線樣式在頁面布局中的運用實例，小伙伴們可以多動手嘗試，試一試不一樣的效果，希望這篇文章可以幫助愛學習的你！
以上就是CSS虛線樣式的制作方法及虛線樣式的運用實例的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網