文字邊框虛線樣式如何用css實現(xiàn)

發(fā)布時間：2020-09-24 10:18:10 來源：億速云閱讀：179 作者：小新欄目：web開發(fā)

文字邊框虛線樣式如何用css實現(xiàn)？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

代碼如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css邊框線怎么設(shè)置的例子</title>
    <meta charset="UTF-8">
    <style type="text/css">
        p
 {
            width: 550px;
            border: 1px solid red;
        }

    </style>
</head>
<body>

<div>
    <p>css border 外邊框、css邊框線怎么設(shè)置?</p>
</div>
</body>
</html>

效果如下圖：

文字邊框虛線樣式如何用css實現(xiàn)

如圖這里就是利用border屬性簡單地為一段文字加上了實現(xiàn)邊框，并且添加顏色。

那么接下來，給大家介紹css虛線框的設(shè)置方法：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css虛線框的例子</title>
    <meta charset="UTF-8">
    <style type="text/css">
        p
 {
            width: 550px;
            border-color:red;
            border-style:dotted ;

        }

    </style>
</head>
<body>
<div>
    <p>css設(shè)置文字虛線邊框、css文字虛線邊框、html虛線框、css邊框虛線代碼</p>
</div>

</body>
</html>

效果如下圖：

文字邊框虛線樣式如何用css實現(xiàn)

這里就提到非常重要的屬性border-style:dotted ;
border-style屬性用于設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。只有當(dāng)這個值不是 none 時邊框才可能出現(xiàn)。

這里的dotted值就是定義點狀邊框。即像上圖中的虛線框展示。

注：所有瀏覽器都支持 border-style 屬性。

感謝各位的閱讀！看完上述內(nèi)容，你們對文字邊框虛線樣式如何用css實現(xiàn)大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

文字邊框虛線樣式如何用css實現(xiàn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽