第一,需要整体构出作业中盒子的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;
}
最后的结果