CSS虛線樣式的製作方法及虛線樣式的運用實例
- yulia原創
- 2018-09-18 14:41:386442瀏覽
在頁面佈局時，為了呈現一定的效果，常常需要使用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虛線樣式的製作方法及虛線樣式的運用實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！