第一，需要整體構出作業中盒子的HTML結構
<div class="row">
<div>11</div>
<div>12</div>
</div>
<div class="row2">
<div>13</div>
<div>14</div>
</div>
首先補充幾個知識點
css-display屬性的幾個值（以下的值都是跟在display：后面的）
1.table：此元素會作為塊級表格來顯示（類似 table），表格前后帶有換行符
2.table-row：此元素會作為一個表格行顯示（類似 tr）
3.table-cell：此元素會作為一個表格單元格顯示（類似 td 和 th）
outline屬性
outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用，
第二，將HTML內的div盒子進行轉換
1.將兩個class為row的div轉換成table-row，設定陰影
2.重要的一步，設定它們的輪廓為虛線，白色，此時因為輪廓會和陰影重疊在一起，外邊框變成了虛線，其實也說明了輪廓是比陰影高了一層的
3.初始化內部小盒子里的資料
.row , .row2{
display: table-row;
box-shadow: 0 0 0 10px red;
}
.row div,
.row2 div {
width: 300px;
height: 300px;
font-size: 30px;
color: red;
font-weight: bold;
text-align: center;
line-height: 300px;
outline：dashed 10px #fff
}
3，根據給出的圖片分別設定不同的border值
=>因為之前再初始化div小盒子的時候已經設定了div的輪廓，以及輪廓的層級比邊框要高，
也就因此實作了和上訴用陰影和輪廓實作虛線的樣式一樣的效果，
=>這里設定的所有邊框除了顏色不一樣，其他的幾個值都是一樣的：
十個像素，直線，
.row div:nth-child(1) {
border-top: 10px solid #009688;
border-left: 10px solid #009688;
border-right: 10px solid red;
border-bottom: 10px solid red;
}
.row div:nth-child(2) {
border: 10px solid #009688;
border-bottom: 10px solid red;
}
.row2 div:nth-child(1) {
border: 10px solid #009688;
border-right: 10px solid red;
}
.row2 div:nth-child(2) {
border: 10px solid #009688;
}
最后的結果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226879.html
標籤：其他