我建议,使用以下HTML:
CSS:
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
Box-shadow: 0 0 0 5px red;
}
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
Box-shadow: 0 0 0 5px red;
}
盒子阴影给出最外面的颜色环,边框给出白色的“内边界”.
或者,您可以使用带有inset关键字的Box-shadow,并使用Box-shadow生成“内部边框”,并将边框用作最外边框:
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid red;
Box-shadow: inset 0 0 0 5px white;
}
div {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid red;
Box-shadow: inset 0 0 0 5px white;
}
显然,根据自己的品味和情况调整尺寸.
但是,使用Box-shadow生成最外边框可以允许多个边框(以下示例中为红色和白色交替):
div {
width: 20em;
height: 20em;
margin: 20px;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
Box-shadow: 0 0 0 5px red,0 0 0 10px white,0 0 0 15px red;
}
div {
width: 20em;
height: 20em;
margin: 20px;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
Box-shadow: 0 0 0 5px red,0 0 0 15px red;
}