奥运五环-web前端
生活随笔
收集整理的這篇文章主要介紹了
奥运五环-web前端
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
web前端實現奧運五環
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Test</title><style type="text/css">.wrapper{position: absolute;left: 30%;top: 30%;margin-left: -390px;margin-top: -185px;}.circle{width: 100px;height: 100px;border-radius: 50%;position: absolute;}.blue1{border:10px solid #0f85cc;}.blue2{border:10px solid transparent;border-right-color: #0f85cc;z-index: 2;}.black1{border:10px solid black;left: 120px;}.black2{border:10px solid transparent;border-bottom-color: black;border-right-color: black;left: 120px;z-index: 2;}.red1{border:10px solid red;left: 240px;}.red2{border:10px solid transparent;border-left-color: red;left: 240px;z-index: 2;}.yellow{border:10px solid yellow;left: 60px;top:70px;}.green1{border:10px solid #0a9d49;left: 180px;top:70px;}.green2{border:10px solid transparent;border-left-color: #0a9d49;left: 180px;top:70px;z-index: 2;}</style> </head> <body> <div class="wrapper"><div class = "circle blue1"></div><div class = "circle blue2"></div><div class = "circle black1"></div><div class = "circle black2"></div><div class = "circle red1"></div><div class = "circle red2"></div><div class = "circle yellow"></div><div class = "circle green1"></div><div class = "circle green2"></div> </div> </body> </html>z-index調各環的層級關系
.black1{border:10px solid black;left: 120px;} .blue2{border:10px solid transparent;border-right-color: #0f85cc;z-index: 2;}邊框設置透明，作為上層環
border:10px solid transparent;運行圖片如下
總結
以上是生活随笔為你收集整理的奥运五环-web前端的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux下部署服务，启动时显示sock
- 下一篇： 微软与网景与浏览器之争