利用 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 ...
随机推荐
- NOIp知识点复习——最短路计数
$Mingqi\_H$ NOIp 2017考挂了...gg 重新开始好了. 计划明年2月24号前复习完所有的NOIp知识点(毕竟很不熟练啊),之后到七月底前学习完省选的东西(flag?). 从现在开始 ...
- Spring 注解注入的几种方式（转）
平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程 ...
- win10如何进入安全模式的几种方法
首先,说一下安全模式的作用: 安全模式, 用途有很多,常见的作用有以下几点 1. 电脑可能由于安装了某些驱动或者软件,不兼容导致电脑启动不了,可以进入安全模式卸载 2. 电脑中病毒之后,可以进入安全模 ...
- 【codeforces 514C】Watto and Mechanism(字典树做法)
[题目链接]:http://codeforces.com/contest/514/problem/C [题意] 给你n个字符串; 然后给你m个询问;->m个字符串 对于每一个询问字符串 你需要在 ...
- Maven学习总结（27）——Maven自定义打包插件maven-assembly-plugin详解
Assembly插件会生成 "assemblies", 此特性等同于的Maven 1 distribution plug-in..该插件不仅支持创建二进制归档文件,也支持创建源码归 ...
- hdu_1020_Encoding_201310172120
Encoding Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- 贪心算法 Heidi and Library (easy)
A. Heidi and Library (easy) time limit per test 2 seconds memory limit per test 256 megabytes input ...
- [bzoj1251]序列终结者_splay
序列终结者 bzoj-1251 题目大意:给定一个长度为n的正整数序列,支持区间加,区间反转,查询区间最大值.所有元素开始都是0. 注释:$1\le n\le 5\cdot 10^4$,操作个数不多于 ...
- HDU 1171 Big Event in HDU(01背包）
题目地址:HDU 1171 还是水题. . 普通的01背包.注意数组要开大点啊. ... 代码例如以下: #include <iostream> #include <cstdio&g ...
- 通过telent、php深入了解http协议
HTTP协议:简单点就是client怎么问.server如何答. 重要性:webservice 还是rest做大型架构都离不开对http协议的认识,甚至能够简化的说webservice = http ...