1. 首頁 > 生活 > >

css設置顏色的四種方式 css樣式顏色可以通過下面哪種方法設定

小知識



文章插圖
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效果圖
【css設置顏色的四種方式 css樣式顏色可以通過下面哪種方法設定】<!-- 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>