這篇文章將為大家詳細(xì)講解有關(guān)CSS如何實(shí)現(xiàn)虛線，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、獨(dú)山子網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開(kāi)發(fā)、獨(dú)山子網(wǎng)絡(luò)營(yíng)銷、獨(dú)山子企業(yè)策劃、獨(dú)山子品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供獨(dú)山子建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

    一、CSS虛線的制作方法

    border-style屬性可以設(shè)置一個(gè)元素的四個(gè)邊框的樣式，它的常用屬性值如下：

    dotted：點(diǎn)狀，在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線

    dashed：虛線，在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線

    solid：定義實(shí)線

    none：無(wú)邊框

    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虛線邊框

    div{border:1pxdashed#000;}

    2、li列表虛線分割，即CSS虛線下邊框

    頁(yè)面中用cssli標(biāo)簽布局的也比較多，每行l(wèi)i下邊用虛線將內(nèi)容分開(kāi)，用border-bottom來(lái)實(shí)現(xiàn)。

    li{border-bottom:1pxdashed#000;}

   

• haveaniceday

   

• haveaniceday

   

• haveaniceday

   

• haveaniceday

   

• haveaniceday

   

• haveaniceday

   

• haveaniceday

   

關(guān)于“CSS如何實(shí)現(xiàn)虛線”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。