CSS虛線樣式的製作方法及虛線樣式的運用實例-css教學-PHP中文網

首頁

web前端

css教學

CSS虛線樣式的製作方法及虛線樣式的運用實例

yulia

Sep 18, 2018 pm 02:41 PM

在頁面佈局時，為了呈現一定的效果，常常需要使用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>

效果圖：

CSS虛線樣式的製作方法及虛線樣式的運用實例

3、CSS一條水平虛線，用hr 標籤，然後對hr標籤新增樣式，border : 1px dotted #FF0000

<hr style="border: 1px dotted #FF0000;">

效果圖：

CSS虛線樣式的製作方法及虛線樣式的運用實例

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虛線樣式的製作方法及虛線樣式的運用實例