首頁 >web前端 >css教學 >文字邊框虛線樣式用css怎麼寫？（例）

文字邊框虛線樣式用css怎麼寫？（例）

藏色散人原創: 2018-08-14 14:59:474292瀏覽

本篇文章主要為大家介紹了關於css文字虛線邊框的樣式該怎麼寫的問題，希望對有需要的朋友有所幫助。這裡先給大家舉一個關於css邊框線怎麼設定的例子。

程式碼如下：

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

    </style>
</head>
<body>

<div>
    <p>css border 外边框、css边框线怎么设置?</p>
</div>
</body>
</html>

效果如下圖：

文字邊框虛線樣式用css怎麼寫？（例）

#如圖這裡就是利用border屬性簡單地為一段文字加上了實現邊框，並且添加顏色。

那麼接下來，跟大家介紹css虛線框的設定方法：

<!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设置文字虚线边框、css文字虚线边框、html虚线框、css边框虚线代码</p>
</div>

</body>
</html>

效果如下圖：

文字邊框虛線樣式用css怎麼寫？（例）