邊框是使用頻率很高的樣式，圖片可以加邊框，表格基本都是帶邊框的，所以邊框的學(xué)習(xí)是很重要的。本篇就來(lái)介紹下CSS邊框的用法。

CSS 中的邊框是圍繞著元素內(nèi)容和內(nèi)邊距的一條或多條線段，您可以自定義這些線段的樣式、寬度以及顏色。您可以通過(guò)下面幾個(gè)屬性分別定義邊框的樣式、寬度和顏色。

1. 邊框的樣式border-style

可以通過(guò)border-style設(shè)置邊框樣式，常用的有solid實(shí)線、dotted點(diǎn)線、dashed虛線三種。

    <p class="border-solid">
        演示實(shí)線邊框
    </p>
    <p class="border-dotted">
        演示點(diǎn)線邊框
    </p>
    <p class="border-dashed">
        演示虛線邊框
    </p>

CSS代碼：

    .border-solid {
        border-style: solid;
    }

    .border-dotted {
         border-style: dotted;
    }

    .border-dashed {
        border-style: dashed;
    }

運(yùn)行效果：

border-style 屬性的可選值如下：

2. 邊框?qū)挾萣order-width

可以通過(guò)border-width調(diào)整邊框的寬度，單位一般使用px像素。

    <p class="border-thick">
        演示粗邊框
    </p>
    <p class="border-thin">
        演示細(xì)邊框
    </p>

CSS代碼，可以根據(jù)實(shí)際情況調(diào)整，此處僅是為了演示。

    .border-thick {
        border-style: solid;
        border-width: 4px;
    }

    .border-thin {
        border-style: solid;
        border-width: 1px;
    }

運(yùn)行效果：

border-width 屬性的可選值如下：

3. 邊框顏色border-color

可以使用bolder-color指定邊框的顏色，HTML代碼：

    <p class="border-red">
        演示紅色邊框
    </p>
    <p class="border-green">
        演示綠色邊框
    </p>

CSS代碼：

    .border-red {
        border-style: solid;
        border-color: red;
    }

    .border-green {
        border-style: solid;
        border-color: green;
    }

運(yùn)行效果：

border-color 屬性的可選值如下：

4. border

border 屬性是上面介紹的 border-width、border-style、border-color 三種屬性的簡(jiǎn)寫，使用 border 屬性可以同時(shí)定義上述三個(gè)屬性，語(yǔ)法格式如下：

border: border-width border-style border-color;

其中 border-width 用來(lái)設(shè)置邊框的寬度；border-style 用來(lái)設(shè)置邊框的樣式；border-color 用來(lái)設(shè)置邊框的顏色。