如何使用CSS对同心圆之间的区域进行着色 [英] How to color area between concentric circle using CSS
问题描述
我有同心圆（圆圈内）和&我必须用两种不同颜色的两个圆圈之间的颜色区域。其中一半应该有不同的颜色。
我尝试过：
。外圈最小{
背景色：＃75a3a3;
宽度：70px; / *你也可以用％来定义* /
身高：70px; / *你可以用％来定义它* /
position：relative;
text-align：center;
border-radius：50％;
background-clip：content-box;
padding：5px;
box-shadow：插入10px 24px 40px 0px＃75a3a3，
插入-10px -24px 40px 0px＃75a3a3，
插入20px -10px 40px 0px＃75a3a3，
inset -20px 10px 40px 0px＃75a3a3;
}
.inner-1 {
background-color：＃f2f2f2;
top：10％;左：10％; / *容器* /
宽度：80％; / *外部1 * /
身高：80％; / * of outer-1 * /
的位置：绝对;
border-radius：50％;
text-align：center;
border：1px solid＃f2f2f2
}
i have concentric circle (circle within circle) & i have to color area between two circle with two diffrent colors. Half of it should have a diffrent color.
What I have tried:
.outer-circle-smallest {
background-color: #75a3a3;
width:70px; /* You can define it by % also */
height:70px; /* You can define it by % also*/
position:relative;
text-align:center;
border-radius: 50%;
background-clip:content-box;
padding:5px;
box-shadow: inset 10px 24px 40px 0px #75a3a3,
inset -10px -24px 40px 0px #75a3a3,
inset 20px -10px 40px 0px #75a3a3,
inset -20px 10px 40px 0px #75a3a3;
}
.inner-1 {
background-color:#f2f2f2;
top: 10%; left:10%; /* of the container */
width:80%; /* of the outer-1 */
height:80%; /* of the outer-1 */
position: absolute;
border-radius: 50%;
text-align:center;
border:1px solid #f2f2f2
}
推荐答案
在此方法中，您无法为圆圈之间的区域着色。因此，将所有圆圈完全着色。在Z顺序中将较小的不同颜色的圆圈放在较大的圆圈顶部。它会产生彩色环的效果，圆形之间的区域。以同样的方式添加更多戒指，你需要它们。
-SA
You cannot color the area between circles in this approach. Therefore, color all circles fully. Put smaller circle of different color on top of the bigger circle in Z-order. It will create an effect of colored ring, the area between the rounded shapes. Add more rings in the same way, it you need them.
—SA
这篇关于如何使用CSS对同心圆之间的区域进行着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
