css盒子模型之邊框寬度，邊框顏色與邊框樣式

/*
    width和height只是設置盒子內容區的大小，而不是盒子的整個大小，
    盒子可見框的大小由內容區，內邊距和邊框共同決定。
 */
.box1 {
    /* 設置內容區的寬度為400px */
    width: 400px;
    /* 設置內容區的高度為400px */
    height: 400px;
    /* 設置內容區的背景色為green */
    background-color: blueviolet;
    /* 設置該盒子模型的下方外邊距為10px */
    margin: 0px 0px 10px;
}

/*
    為元素設置邊框必須指定三個樣式屬性：
        border-width 表示邊框寬度
        border-color 表示邊框顏色
        border-style 表示邊框樣式
 */
.box2 {
    /* 設置邊框的寬度為10px，使用border-width可以指定四個邊框的寬度，
       如果border-width后面跟一個值，則設置的是上，右，下，左(按照順時針方向)邊框的寬度都是該值(四個寬度都一樣)；
       如果border-width后面跟兩個值，則分別設置的是上下，左右邊框的寬度；
       如果border-width后面跟三個值，則分別設置的是上，左右，下邊框的寬度；
       如果border-width后面跟四個值，則分別設置的是上，右，下，左邊框的寬度；
       本例中只設置一個值，表示四個邊框的寬度都是10px。
     */
    border-width: 10px;
    /* 設置邊框的顏色為red，使用border-color可以指定四個邊框的顏色，設置規則與border-width相同，
       本例中只設置一個值，表示四個邊框的顏色都是red。
     */
    border-color: red;
    /* 設置邊框的樣式為solid，使用border-style可以指定四個邊框的樣式，設置規則與border-width相同，
       border-style常用的值有none(默認無邊框)，solid(實線)，dotted(點狀)，dashed(虛線)，double(雙線)等等，
       本例中只設置一個值，表示四個邊框的樣式都是solid。
     */
    border-style: solid;
}

.box3 {
    /* 設置上下邊框寬度為10px，左右邊框寬度為20px */
    border-width: 10px 20px;
    /* 設置上下邊框顏色為red，左右邊框顏色為green */
    border-color: red green;
    /* 設置上下邊框樣式為solid，左右邊框樣式為dotted */
    border-style: solid dotted;
}

.box4 {
    /* 設置上邊框寬度為10px，左右邊框寬度為20px，下邊框寬度為30px */
    border-width: 10px 20px 30px;
    /* 設置上邊框顏色為red，左右邊框顏色為green，下邊框顏色為yellow */
    border-color: red green yellow;
    /* 設置上邊框樣式為solid，左右邊框樣式為dotted，下邊框樣式為dashed */
    border-style: solid dotted dashed;
}

.box5 {
    /* 設置上，右，下，左邊框的寬度分別是10px，20px，30px，40px */
    border-width: 10px 20px 30px 40px;
    /* 設置上，右，下，左邊框的顏色分別是red，green，yellow，blue */
    border-color: red green yellow blue;
    /* 設置上，右，下，左邊框的樣式分別是solid，dotted，dashed，double */
    border-style: solid dotted dashed double;
}

<!-- html代碼 -->
<div class="box1"></div>
<div class="box1 box2"></div>
<div class="box1 box3"></div>
<div class="box1 box4"></div>
<div class="box1 box5"></div>

查看源代碼