css3画五环 |css中怎么将文字不会自适应

.olympic-rings {
width: 300px;
height: 300px;
margin: 50px auto;
position: relative;
}
.olympic-rings:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
.olympic-rings:after {
content: "";
position: absolute;
top: 35px;
left: 35px;
width: 230px;
height: 230px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.olympic-rings .ring {
display: block;
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}
.blue {
top: calc(50% - 60px);
left: calc((50% - 120px) - 60px);
background: #1E90FF;
}
.black {
top: calc((50% - 120px) - 60px);
left: calc(50% - 60px);
background: #000000;
}
.red {
top: calc(50% - 60px);
left: calc((50% + 120px) - 60px);
background: #FF0000;
}
.yellow {
top: calc((50% + 120px) - 60px);
left: calc(50% - 60px);
background: #FFD700;
}
.green {
top: calc((50% - 60px) + 120px);
left: calc(50% - 60px);
background: #008000;
}

以上就是绘制五环所需的CSS代码。通过CSS3的border-radius属性，大家可以轻松地创建一个圆形，而box-shadow属性则能够创建出细微的阴影。之后，大家为五个圆形分别设置它们的颜色，并通过设定它们的位置和大小将它们放置在合适的位置上。最后，大家为整个图标增加了一个白色背景和黑色阴影，这样大家就制作出了漂亮的五环图标。