CSS - 邊框屬性

CSS border 是一個簡寫屬性，它設定元素周圍邊框的 **樣式**、**寬度** 和 **顏色**。如果未指定顏色，則將應用文字的顏色。

語法

border: border-width border-style border-color | initial | inherit;

屬性值

值	描述
border-width	它指定邊框的寬度。預設值為“medium”。
border-style	它指定邊框的樣式。預設值為“none”。
border-color	它指定邊框的顏色。預設值為文字的顏色。
initial	這將屬性設定為其初始值。
inherit	這從父元素繼承屬性。

CSS 邊框屬性示例

以下示例演示瞭如何在單個屬性中使用所有三個屬性。這是設定任何元素周圍邊框最常用的屬性。

文字元素周圍的邊框

可以根據樣式、寬度和顏色的選擇為文字設定邊框。以下示例中展示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }
    </style>
</head>

<body>
    <h2>CSS border property</h2>
    <p style="border:5px solid red;">
        4px width solid style and red color
    </p>
    <p style="border:5px dotted blue;">
        5px width dotted style and blue color
    </p>
    <p style="border:5px dashed green;">
        5px width dashed style and green color
    </p>
    <p style="border:5px dashed;">
        5px width dashed style and color of the text
    </p>
</body>

</html>

圖片元素周圍的邊框

也可以根據我們選擇的樣式、寬度和顏色為圖片提供邊框。以下示例中展示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
            color: white;
        }

        .img {
            background-image: url(/css/images/pink-flower.jpg);
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <h2>CSS border property</h2>
    <p style="border:5px solid red;" class="img">
        4px width solid style and red color
    </p>
    <p style="border:5px dotted blue;" class="img">
        5px width dotted style and blue color
    </p>
    <p style="border:5px dashed green;" class="img">
        5px width dashed style and green color
    </p>
    <p style="border:5px dashed ;" class="img">
        5px width dashed style and color of the text
    </p>
</body>

</html>

支援的瀏覽器

屬性
border	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面