zoukankan      html  css  js  c++  java
  • 利用 html+css 画同心圆(concentric circles)——绝对布局与相对布局

    一、css 绘制圆

    1  
    2 #circle {
    3     width: 300px;
    4    height: 300px;
    5    background-color: #000000;
    6    border-radius: 300px;
    7 }

    key:

    1、width = height 相当于画一个正方形

    2、border-radius > 0.5*width                (border-radius:圆角半径 )

    二、同心圆,两种画法

    2.1 absolute构成同心圆

    绘制外面的圆:

    1 #exCircle{
    2     margin:auto;
    3     width: 300px;
    4     height: 300px;
    5     border-radius: 300px;
    6     background-color: green;
    7 }

    key:

    1、margin: auto 使圆居中显示

    2、外部圆的半径为150px(width/2)

    绘制里面的圆

    1 #inCircle{
    2     margin-top: 50px;
    3     margin-left: 50px;      
    4     position: absolute;
    5     width: 200px;
    6     height: 200px;
    7     border-radius: 150px;
    8     background-color: yellow;
    9 }

     key:

    1、内部圆半径为100px(width/2)

    2、position:absolute 使用绝对布局

    3、margin-top:50px (外部圆半径-内部圆半径)

    2.2 relative构成同心圆

    绘制外面的圆:

    1 #exCircle{
    2     margin:auto;
    3     width: 300px;
    4     height: 300px;
    5     border-radius: 150px;
    6     background-color: green;
    7 }

    绘制内部的圆:

    1 #inCircle{
    2     top: 50px;
    3     left: 50px;      
    4     position: relative;
    5     width: 200px;
    6     height: 200px;
    7     border-radius: 100px;
    8     background-color: yellow;
    9 }

    key:

    1、top/left 都是 width/2

    三、效果:

    四、知识补充

    1、border-radius:参考https://blog.csdn.net/liuyan19891230/article/details/50724630

    2、position属性,relative/absolute区分,网上信息比较乱,最近整理以后再发一篇

    附:

    完整源码(absolute)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>concentric circles</title>
        <style type="text/css">
    
    #exCircle{
        margin:auto;
        width: 300px;
        height: 300px;
        border-radius: 150px;
        background-color: green;
    }
    
    #inCircle{
        margin-top: 50px;
        margin-left: 50px;      
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 100px;
        background-color: yellow;
    }
    
    </style>
    </head>
    <body>
    
    <div id="exCircle">
        <div id="inCircle">
        </div>
    </div>
    
    </body>
    <html>
  • 相关阅读:
    elasticHD
    python3--socketIO_client 摸索怕坑指南
    治疗重新造轮子症系列——递归查询json数据中所有的key值
    REST FRAME WORK--认证 权限 Xadmin
    REST FRAME WORK--视图基类 视图集
    REST FRAME WOEK 请求与响应&视图
    REST FRAME WORK--1
    VUE--axios--对象提供的属性功能
    VUE--组件化开发--VUE-CLI
    Vue中发送ajax请求——axios使用详解
  • 原文地址:https://www.cnblogs.com/luiyuying/p/LYY_Concentric_Circles.html
Copyright © 2011-2022 走看看