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实现一个奥运五环的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。