利用 html+css 画同心圆（concentric circles）——绝对布局与相对布局
一、css 绘制圆
#circle {
width: 300px;
height: 300px;
background-color: #000000;
border-radius: 300px;
}
key:
1、width = height 相当于画一个正方形
2、border-radius > 0.5*width （border-radius：圆角半径 ）
二、同心圆，两种画法
2.1 absolute构成同心圆
绘制外面的圆：
#exCircle{
margin:auto;
width: 300px;
height: 300px;
border-radius: 300px;
background-color: green;
}
key:
1、margin: auto 使圆居中显示
2、外部圆的半径为150px（width/2）
绘制里面的圆
#inCircle{
margin-top: 50px;
margin-left: 50px;
position: absolute;
width: 200px;
height: 200px;
border-radius: 150px;
background-color: yellow;
}
key:
1、内部圆半径为100px（width/2）
2、position:absolute 使用绝对布局
3、margin-top:50px (外部圆半径-内部圆半径）
2.2 relative构成同心圆
绘制外面的圆：
#exCircle{
margin:auto;
width: 300px;
height: 300px;
border-radius: 150px;
background-color: green;
}
绘制内部的圆：
#inCircle{
top: 50px;
left: 50px;
position: relative;
width: 200px;
height: 200px;
border-radius: 100px;
background-color: yellow;
}
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>
利用 html+css 画同心圆（concentric circles）——绝对布局与相对布局的更多相关文章
- 传入两坐标点，利用div+css画线
上样式生成函数代码 lineStyle (x1, y1, x2, y2, lineWidth = 4, color = 'black') { let rectX = x1 < x2 ? x1 : ...
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
- 一步一步教你用CSS画爱心
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
- CSS学习笔记一：css 画平面图形
最近在学习CSS,先从CSS画点平面图形入手,发现除了正方形.长方形此类比较简单,只要有长宽设置恰当即可,画圆要涉及radius,然后恢复到做界面的最讨厌的状态了,不断的修改设值,调整数据,所幸并不多 ...
- Effective前端1---chapter 2 用CSS画一个三角形
1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
- CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- css实战#用css画一个中国结
大家好!今天跟大家分享一个用 css 画中国结的教程.最终效果如下: 大家如果感兴趣可以参考我的源码:gitHub地址 首先,我们定义好画中国结需要的结构: <div class="k ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
随机推荐
- Promise嵌套问题/async await执行顺序
/* 原则: 执行完当前promise, 会把紧挨着的then放入microtask队尾, 链后面的第二个then暂不处理分析, */ 一. new Promise((resolve, reject) ...
- Luogu P1187 3D模型
题目描述 一座城市建立在规则的n×m网格上,并且网格均由1×1正方形构成.在每个网格上都可以有一个建筑,建筑由若干个1×1×1的立方体搭建而成(也就是所有建筑的底部都在同一平面上的).几个典型的城市模 ...
- 21.使用rescoring机制优化近似匹配搜索性能
一.match和phrase match(proximity match)区别 1.match:只要简单的匹配到了一个term,就会将term对应的doc作为 结果返回. 2.phrase ...
- 第四节：numpy之数组排序
- PatentTips - DMA address translation between peer-to-peer IO devices
BACKGROUND As processing resources have increased, demands to run multiple software programs and ope ...
- 这书真的不错--Spring MVC Beginner's Guide
五百多页,我干到三百多页了. 每个知识点都有说明,操作,解释. 学SPRING MVC,有它就够了. 遗憾的是,这个PDF的文档格式太稀松啦,且,无中文版~~~ 我都想作汉化翻译工作了...算了,忍住 ...
- hdu_1029-Ignatius and the Princess IV_201310180916
Ignatius and the Princess IV Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32767 K ( ...
- 优化实例- not in 和 not exists
客户运行一个SQL,非常慢.于是进行了一下改写.速度飞快,首先看一下原来的SQL. original sql SQL> explain plan for 2 select count(*) fr ...
- AngularJS：实现轮播图效果
实现步骤如下: 要实现这个功能,可以http://angular-ui.github.io/bootstrap/ 中的控件实现.实现步骤如下: 1. 下载ui-bootstrap.js程序http:/ ...
- [Vue] Code split by route in VueJS
In this lesson I show how to use webpack to code split based on route in VueJS. Code splitting is a ...