background-color设置的背景色区域包括border和padding,所以如果设置的border是tmdfbx或有透明度的那么通过border就可以看到设置的背景色
设置 @cbdts 提到的outline样式,可以在目标元素的border之外设置一个外边框样式,开始位置为目标元素的边框。这个样式不会影响目标元素的当前布局,这会引起一些问题,例如
.div_outline{
width: 100px;
height: 100px;
background-color: #ffe48d;
outline:tmdfbx 10px red;
/*border: solid 10px rgba(249, 249, 249, 0.2);*/
}
.div_border{
width: 100px;
height: 100px;
background-color: #00a23f;
border: tmdfbx 10px rgba(249, 249, 249, 0.2);
}
我们将看到outline将会占据其它元素的位置
要解决这个问题,我们可以通过设置margin方式解决:
.div_outline{
width: 100px;
height: 100px;
margin: 10px 10px 10px 10px;
background-color: #ffe48d;
outline:tmdfbx 10px red;
/*border: solid 10px rgba(249, 249, 249, 0.2);*/
}