利用 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 ...
随机推荐
- Python学习【第7篇】：Python之常用模块2
hashlib,configparser,logging模块 一.常用模块二 hashlib模块 hashlib提供了常见的摘要算法,如md5和sha1等等. 那么什么是摘要算法呢?摘要算法又称为哈希 ...
- Bootstrap练习：可折叠下拉菜单
代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...
- 14.multi_match+most-fields策略
主要知识点 most-fields策略的用法 most-fields策略和best-fields的比较 best-fields策略:将某一个field匹配尽可能多的关键词的doc优先返 ...
- Python 输出带颜色的文字方法
输出文字带颜色 书写格式,和相关说明如下: #格式: 设置颜色: \033[显示方式;前景色;背景色m \033[0m 方法: 字体色 背景色 颜色 -------------------- ...
- Restful传递数组参数的两种方式
第一种,直接传递数组 js直接传递数组 var data = ["123","456"];that.loadDictionarys(data).subscrib ...
- 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 ( ...
- MyBatis 3实现时间段精确的查询（转）
效果如下: 说明: 时间范围的查询会存在以下问题: 1.如果单纯采用年月日的形式会出现缺少最后一点的数据,比如要查询2015-09-16到2015-09-17,那么2015-09-17 01:00:0 ...
- POJ 2947-Widget Factory(高斯消元解同余方程式)
题目地址:id=2947">POJ 2947 题意:N种物品.M条记录,接写来M行,每行有K.Start,End,表述从星期Start到星期End,做了K件物品.接下来的K个数为物品的 ...
- CreateDialog Win32 API调用的一个小问题
在老版本号的VC编译器上.关键调用是下面2句: InitCommonDialogs(); HWND hwndDialog = CreateDialog(hInstance, "IDD_XXX ...
- ios调用dismissViewController的一个小陷阱
我们的APP从启动到进入主页面.是通过presentViewController构造了一个ViewController序列,类似于首页 -> 登陆页 -> 启动载入页 -> 主页面 ...