如何以一个圆圈(一个div)作为响应式,以便对容器的尺寸做出反应？
假设这样的圈子例如：
这是一个循环的工作CSS：
div.circle {
width: 90%;
height: 0;
padding-bottom: 90%;
margin: auto;
float: none;
border-radius: 50%;
border: 1px solid green;
background: pink;
}
<div class="circle"></div>
如何添加两种颜色的边框？我尝试了大纲,但它作为一个矩形出来.我试图将另一个div放在圆圈div中,并使用背景颜色,但是我不能垂直对齐内部div.
解决方法
我建议,使用以下HTML：
<div></div>
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;
}
<div></div>
盒子阴影给出最外面的颜色环,边框给出白色的“内边界”.
或者,您可以使用带有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;
}
<div></div>
显然,根据自己的品味和情况调整尺寸.
但是,使用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;
}
<div></div>
