html css 奥运五环,用css3实现一个奥运五环
css3實現奧運五環的方法：首先給5個div設置border-radius樣式，制作五個圓環；然后使用position屬性設置五個圓環的位置；最后使用z-index屬性調整各環的層級關系即可。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
五環可以利用五個統計的div來實現，要實現五環的嵌套關系，需要分別給這五個div加偽元素。
這里主要用到了兩個css3屬性：
1、z-index調各環的層級關系
2、transparent設置透明度
具體代碼：
Title*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
border: 10px solid;
border-radius: 50%;
float: left;
position: absolute;
}
div::after{
width: 200px;
height: 200px;
border: 10px solid;
border-radius: 50%;
float: left;
position: absolute;
content: "";
left: -10px;/*相對于父級定位，但不包括border，所以利用負邊距使他們重合*/
top:-10px;
}
.blue{
border-color: blue;
top:0;
left: 0;
}
.blue::after{
border-color: blue;
z-index: 1;
border-bottom-color: transparent;/*將下邊框設為透明，使看到的為黃色環 以下同理*/
}
.black{
border-color: black;
top:0;
left: 230px;
}
.black::after{
border-color: black;
z-index: 1;
border-left-color: transparent;
}
.red{
border-color: red;
top:0;
left: 460px;
}
.red::after{
border-color: red;
z-index: 1;
border-left-color: transparent;
}
.yellow{
border-color: yellow;
top:110px;
left: 110px;
}
.yellow::after{
border-color: yellow;
}
.green{
border-color: green;
top:110px;
left: 340px;
}
.green::after{
border-color: green;
z-index: 1;
border-top-color: transparent;
border-right-color: transparent;
}
效果圖：
相關學習視頻推薦：css視頻教程
總結
以上是生活随笔為你收集整理的html css 奥运五环,用css3实现一个奥运五环的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java调用oracle过程,JAVA调
- 下一篇： tranquil