1、html代码

[html] view plaincopy

<body>
<div id="circle_bot">
</div>
<div id="circle_mid">
</div>
<div id="circle_top">
</div>
</body>

html部分代码很简单，只需要三个DIV标签即可，记得分别命名，这样在CSS中方便单独选中。

2、CSS代码：

[html] view plaincopy

<style type="text/css">
#circle_bot{
background-color:#E09;
width: 150px;
height: 150px;
margin: 0px 0 0 0px;
border-radius: 50%;
}
#circle_mid {
background-color:#EAA;
width: 100px;
height: 100px;
margin: -125px 0 0 25px;
border-radius: 50%;
}
#circle_top{
background-color:#ED9;
width: 50px;
height: 50px;
margin: -75px 0 0 50px;
border-radius: 50%;
}
</style>

分别用id选择器选中三个div，然后给予不同的背景色予以区分。

从底圆到顶圆依次设定宽高（事实上此时还是个正方形），按照位置设置偏移位置，margin的四个偏移值分别对应上、右、下、左的边距，负数则表示反方向。

border-radius是倒圆角，数值可以使用像素，为了简单起见设置50%则倒圆角的半径默认是该DIV宽度的50%。

转载于:https://www.cnblogs.com/ysx215/p/6868801.html

用HTML+CSS画出一个同心圆相关推荐

[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...
[css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
[css] 用css画出一个圆圈，里面有个对号
[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;bor ...
用css画出一个圆圈，里面有个叉号（不能用英文字母x）
用css画出一个圆圈,里面有个叉号(不能用英文字母x) #cyc {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;b ...
Web 利用纯html和css画出一个android机器人
Android机器人这个小项目是为了熟悉border-radius 圆角边框参考文档 border-radius 源代码 <style>.robot{width: 500px;heig ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
运用html画一个三角形,利用css或html5画出一个三角形的方法
利用css或html5画出一个三角形的方法发布时间:2020-09-14 14:49:22 来源:亿速云阅读:83 作者:小新这篇文章主要介绍利用css或html5画出一个三角形的方法,文中介绍 ...

用HTML+CSS画出一个同心圆

1、html代码

2、CSS代码：

用HTML+CSS画出一个同心圆相关推荐

最新文章

热门文章