css設置字體顏色代碼「css樣式顏色怎麼設置」

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

盒子模型效果圖，盒子可見框的大小由內容區，內邊距和邊框共同決定。

box1效果圖

/*
 為元素設置邊框必須指定三個樣式屬性：
 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;
}

box2效果圖

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

box3效果圖

.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;
}

box4效果圖

.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;
}

box5效果圖

<!-- 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>