CSS：五環

時間 2019-11-13

標籤 css 五環欄目 CSS 简体版

原文原文鏈接

描述：用5個div寫成imgs/奧運五環html

思路：web

(1)將五個div的邊框設置爲50%，成爲圓形；
再使用絕對定位將元素設置到不一樣的位置，（注意：設置定位的元素的left/top/right/bottom默認值是auto,不是0）
再將每一個元素下使用僞類添加一個相同屬性的圓形
再利用z-index屬性對元素中間夾實現五環（注意：定位的元素z-index纔有效）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .circle,.circle::after{
            width: 200px;
            height:200px;
            border: 10px solid #0000ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute; 
        }
        .circle::after{
            content: "";  
            top:-10px;
            left:-10px; 
        }

        .circle1{
           top:0px;
           left:0px;
            
        }
        .circle1::after{
            z-index: 1;
            border-bottom-color: transparent;
            
        }
        .circle2{
            border-color: #000000;
            top:0;
            left:230px;
        }
        .circle2::after{
            border-color: #000000;  
            z-index: 1;
            border-left-color: transparent;
             
        }
        .circle3{
            border-color: #ff0000;
            top:0;
            left:460px;
        }
        .circle3::after{
            border-color: #ff0000;
            z-index: 1;
            border-left-color: transparent;
         
        }
        .circle4{
            border-color: #ffff00;
            left:110px;
            top: 110px;
        }
        .circle4::after{
            border-color: #ffff00;
          
         
        }
        .circle5{
            border-color: #00ff00;
            top: 110px;
            left:340px;
        }
        .circle5::after{
            border-color: #00ff00;
            z-index: 2;
            border-top-color: transparent;
            border-right-color: transparent;
           
          

        }

    </style>
</head>
<body>
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
<div class="circle circle5"></div>

</body>
</html>

1. 純CSS實現奧運五環
2. HTML+CSS編寫五環居中案例
3. CSS(五)
4. CSS樣式（五）- CSS高級
5. CSS（五）浮動
6. DIV+CSS實戰（五）
7. HTML五、CSS三、ES6
8. css第五課時
9. 從零開始學HTML&&CSS&&JavaScrip——JavaScrip之奧運五環
10. 用html和css寫出一個奧運五環
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• RxJava操作符（五）Error Handling
• Git五分鐘教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。