Css - 画同心圆

作者: ElricTang | 来源:发表于2019-10-09 22:02 被阅读0次

Css - 画同心圆
canvas window.requestAnimationFr
关于一些CSS常用技巧吧
用Tableau画环形图系列（一）画个简单的圆
用Tableau画环形图系列（二）画同心圆
用Tableau画环形图系列（七）用Tableau画尖状环形图[
用Tableau画环形图系列（五）画圆弧图（2）
用Tableau画环形图系列（三）画环状条形图
用Tableau画环形图系列（四）画圆弧图（1）
用Tableau画环形图系列（六）画柱状环形图

如何使用 HTML + CSS画同心圆 ?

方案一：使用`border-radius`绘制圆形，通过定位或margin的方法设置位置。（有多少个圆就需要多少个div）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .circle:nth-child(1){
                width:50px;
                height:50px;
                border-radius: 50%;
                border: 1px solid red;
                position: absolute;
                top:75px;
                left:75px;
            }
            .circle:nth-child(2){
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid green;
                position: absolute;
                top:50px;
                left:50px;
            }
            .circle:nth-child(3){
                width: 200px;
                height: 200px;
                border-radius: 50%;
                border: 1px solid yellow;
                position: absolute;
                top:0;
                left:0;
            }
        </style>
    </head>
    <body>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </body>
</html>

方案二：添加伪元素（局限：一个div只能添加两个同心圆）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style> 
            *{
                margin:0;
                padding:0;
            }           
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                margin: 110px 110px;
                border: 1px solid red;
            }
            .circle::before {
                content: '';
                width: 120px;
                height: 120px;
                border-radius: 50%;
                position: absolute;
                top: 100px;
                left: 100px;
                border: 1px solid green;
            }
            .circle::after {
                content: '';
                width: 80px;
                height: 80px;
                border-radius: 50%;
                position: absolute;
                top: 120px;
                left: 120px;
                border: 1px solid yellow;
            }
        </style>
    </head>
    <body>
        <div class="circle"></div>
    </body>
</html>

方案三：使用`box-shadow`（只需要一个div就可以画很多圆）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>            
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                margin:100px;
                box-shadow: 0 0 0 5px red,0 0 0 10px green,0 0 0 20px yellow;
            }
        </style>
    </head>
    <body>
        <div class="circle"></div>
    </body>
</html>

方案四：使用Css3背景渐变（Gradients），同样只需要一个div

径向渐变
background: radial-gradient(circle,red,green,blue,yellow,black);
重复径向渐变
background: repeating-radial-gradient(red, yellow 10%, green 15%);

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>            
            .circle {
              width: 100px;
              height: 100px;
              border-radius: 50%;
              margin:100px;
              background: repeating-radial-gradient(red, yellow 10%, green 15%);
            }
        </style>
    </head>
    <body>
        <div class="circle"></div>
    </body>
</html>