CSS如何实现虚线
這篇文章將為大家詳細(xì)講解有關(guān)CSS如何實(shí)現(xiàn)虛線，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
一、CSS虛線的制作方法
border-style屬性可以設(shè)置一個(gè)元素的四個(gè)邊框的樣式，它的常用屬性值如下：
dotted：點(diǎn)狀，在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線
dashed：虛線，在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線
solid：定義實(shí)線
none：無邊框
double：雙線
CSS虛線樣式的實(shí)現(xiàn)就是用的屬性值dashed，dotted。
border-style屬性可以設(shè)置一個(gè)值，兩個(gè)值，三個(gè)值，四個(gè)值，他們代表的意思如下：
1、border-style:dottedsoliddoubledashed
表示上邊框是點(diǎn)狀，右邊框是實(shí)線，下邊框是雙線，左邊框是虛線
2、border-style:dottedsoliddouble
表示上邊框是點(diǎn)狀，右邊框和左邊框是實(shí)線，下邊框是雙線
3、border-style:dottedsolid
表示上邊框和下邊框是點(diǎn)狀，右邊框和左邊框是實(shí)線
4、border-style:dotted
表示所有4個(gè)邊框都是點(diǎn)狀
邊框的寫法：border:border-width,border-style,border-color。所以，寬度為1px的黑色虛線可以這樣寫border:1pxdashed#000;
二、CSS虛線的運(yùn)用實(shí)例
1、CSS虛線邊框
<styletype="text/css">
div{border:1pxdashed#000;}
</style>
<body>
<div>生活不止眼前的茍且，還有詩和遠(yuǎn)方的田野</div>
</body>
2、li列表虛線分割，即CSS虛線下邊框
頁面中用cssli標(biāo)簽布局的也比較多，每行l(wèi)i下邊用虛線將內(nèi)容分開，用border-bottom來實(shí)現(xiàn)。
<styletype="text/css">
li{border-bottom:1pxdashed#000;}
</style>
<body>
<ul>
<li>haveaniceday</li>
<li>haveaniceday</li>
<li>haveaniceday</li>
<li>haveaniceday</li>
<li>haveaniceday</li>
<li>haveaniceday</li>
<li>haveaniceday</li>
</ul>
</body>
總結(jié)
- 上一篇： 计算机图形学跳一跳_“跳一跳”刷不到第一
- 下一篇： 微型计算机的主机包括哪些