利用 html+css 画同心圆（concentric circles）——绝对布局与相对布局

最新推荐文章于 2021-08-04 08:18:37 发布
最新推荐文章于 2021-08-04 08:18:37 发布
阅读量925 收藏
点赞数
原文链接：https://my.oschina.net/u/4191619/blog/3096995
版权

本文转载于:猿2048网站利用 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

 

三、效果：

1359776-20180404183451387-1423436944.png

四、知识补充

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>

 

转载于:https://my.oschina.net/u/4191619/blog/3096995

chuluxie3918
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用css3画个同心圆示例代码
01-21
基本思路 首先你得画三个圆吧，那三个圆怎么重叠到一块呢？这个就得靠-margin来控制了。 <div id=tongxin> <div id='t1'></div> <div id=t2></div> <div id=t3></div> </div> css #t1 { float:left; width:150px; height:150px; background: pink; border-radius:75px
如何用html边框画同心圆,css3画同心圆
weixin_35964171的博客
06-17 308
基本思路首先你得画三个圆吧，那三个圆怎么重叠到一块呢？这个就得靠-margin来控制了。css#t1 {float:left;width:150px;height:150px;background: pink;border-radius:75px ;}#t2 {float:left;width:100px;height:100px;margin-left:-125px;/*move to left...
css同心圆
qq_37942845的博客
07-18 517
width: 15px; height: 15px; border-radius: 50%; padding: 3px; border: 1px solid $colorD; background-color: $colorD; background-clip:content-box; 重点是background-clip
HTML+CSS画同心圆
热门推荐
北冥木鱼技术博客
04-05 1万+
校招前端的同学们经常会遇到这样的面试题：用HTML+CSS画出一个同心圆。 例如： 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用。 1、html代码 html部分代码很简单，只需要三个DIV标签即可，记得分别命名，这样在CSS中方便单独选中。 2、CSS代码： #circle_bot{ background-
圆形插件html,circles是一款基于HTML5 SVG的轻量级JavaScript圆形进度条插件。
weixin_30986285的博客
07-05 477
Circles Lightweight JavaScript library that generates circular graphs in SVG. Now with animation.UsageInclude the circles.js or circles.min.js file in your HTML file. There are no dependencies.Create ...
角点距离矩阵和同心圆划分的曲线描述与匹配
03-10
针对曲线匹配的效率与鲁棒性问题,提出了一种基于角点距离矩阵和同心圆划分的曲线描述与匹配算法。该算法分为粗略匹配和精确匹配两个阶段。粗略匹配阶段首先采用角点距离矩阵来描述曲线;然后通过子矩阵的方法来匹配...
concentric-detection-houghtransform.zip_C 霍夫圆_同心圆_圆检测_检测同心圆_霍夫
07-14
霍夫变换，同心圆检测，比较有用。文档中有详细的解释
CCTag:检测由同心圆组成的CCTag标记
04-29
CCTag库 检测由同心圆组成的CCTag标记。 在CPU和GPU中均实现。 该库是该文件的实现： Lilian Calvet，Pierre Gurdjos，Carsten Griwodz，Simone Gasparini。 在高度挑战性的条件下对圆形基准的检测和精确定位。 在：...
matlab开发-圆滑的同心圆
08-24
在MATLAB中开发圆滑的同心圆涉及到图形绘制和3D建模技术。这个项目可能是为了创建一个视觉效果良好的同心圆环模型，或者用于某种特定的科学或工程应用，如模拟物理现象或数据可视化。主要知识点包括： 1. **MATLAB...
flutter-concentric-transition:Flutter插件，可使用同心过渡效果创建视图
05-04
将其导入到您的文件中import 'package:concentric_transition/concentric_transition.dart'; 特征 同心PageView 同心飞剪机 同心PageRoute 用法 使用ConcentricPageView小部件 import 'package:concentric_...
如何用html边框画同心圆,纯CSS图形 - padding圆形/同心圆
weixin_42522148的博客
06-17 819
之前讲述过几个使用纯CSS制作的图形，比如三角形《border绘制三角形(各种角度)》今天来分享下上图所示的使用CSS绘制同心圆，主要使用padding属性！代码如下：.box{width:100px;height:100px;border-radius:50%;padding:10px;border:10pxsolid;background-color:currentColor;...
怎样用css3画画,如何使用css3画个同心圆
weixin_42129005的博客
08-04 576
这篇文章主要给大家介绍了利用css3如何画个同心圆的相关资料，文中给出了详细的示例代码，并对代码进行了详细的解析方法大家理解和学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。基本思路首先你得画三个圆吧，那三个圆怎么重叠到一块呢？这个就得靠-margin来控制了。css#t1 {float:left;width:150px;height:150px;background: pink...
DIV&CSS多种方式实现同心圆
cell的博客
08-23 1477
div嵌套 利用border和boxshadow 径向渐变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
CSS实标题现同心圆的缩放
qq_40549954的博客
08-09 573
CSS实标题现同心圆的缩放 最近学习了css动画效果，记录一下同心圆的缩放问题 问题描述 我先设置了两个div，外圈是class=“one”，内圈是class=“two”, 代码如下： <body> <div class="one"></div> <div class="two"></div> </body> 分别设置他们的div，给他们边框，并且设置成圆形 .one { width: 500px;
html创建圆圈并适应窗口居中
qq_39619887的博客
06-24 475
html创建圆圈并适应窗口居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #circle{ border: 1px solid black; border-radius: 50%;
html 小圆点居中,html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法...
weixin_34688784的博客
05-31 474
html元素 水平居中 于 其父级元素的方法：方法1：复制代码代码如下:左右居中方法1复制代码代码如下:html,body,div{margin:0;padding:0;height:100%;position:relative;}.wrap{width:400px;height:300px;margin:10px;border:1px solid #000;}.left-right-middle...
前端CSS基础学习之——居中，定位，画圆
guitarist0505的博客
03-26 1372
一个demo 目的是实现 浏览器内一个div的居中，然后在div的对角上分别加一个四分之一圆。首先 要实现浏览器内居中，怎么实现呢？  第一步肯定是建立一个div,并且设置它的高度宽度。  第二步是把它的position属性设置为absolute,并设置top和left的参数设置为50%，这样div的左上角就居中了。下一步就是要让div的中心居中。 第三步是通过 translate 位移元素使之中...
html画个正方形
小屁孩大帅-保密的博客
11-28 3743
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg demo</title> </head> <body> <svg width="500" height="500" style="ba...
如何用html边框画同心圆,使用CSS3实现的一组不规则同心圆
weixin_39815310的博客
06-17 222
CSS语言：CSSSCSS确定.box {width: 100px;height: 100px;display: inline-block;background-color: orange;color: orange;border-radius: 50%;border: 10px solid transparent;box-shadow: inset 0 0 0 10px rgba(255, 25...
python画同心圆
最新发布
08-17
要在Python中绘制同心圆，你可以使用`matplotlib`库或`turtle`库。以下是使用这两个库的示例代码： 使用matplotlib库： ```python import matplotlib.pyplot as plt def draw_concentric_circles(num_circles, radius): fig, ax = plt.subplots() ax.set_aspect(1) plt.xlim(-radius-1, radius+1) plt.ylim(-radius-1, radius+1) plt.gca().set_aspect('equal', adjustable='box') plt.grid() for i in range(num_circles): circle = plt.Circle((0, 0), radius*(i+1)/num_circles, fill=False) ax.add_patch(circle) plt.show() # 绘制4个同心圆，半径分别为1、2、3、4 draw_concentric_circles(4, 4) ``` 使用turtle库： ```python import turtle def draw_concentric_circles(num_circles, radius): for i in range(num_circles): turtle.circle(radius*(i+1)) # 创建一个Turtle对象 my_turtle = turtle.Turtle() # 绘制4个同心圆，半径分别为50、100、150、200 draw_concentric_circles(4, 50) # 关闭窗口 turtle.done() ``` 希望这可以帮助你绘制同心圆！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值