利用 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 ...
随机推荐
- The JVM Architecture Explained
转自:https://dzone.com/articles/jvm-architecture-explained?oid=18544920 Every Java developer knows tha ...
- JS练习：两级联动
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- python爬虫17 | 听说你又被封 ip 了，你要学会伪装好自己，这次说说伪装你的头部
这两天 有小伙伴问小帅b 为什么我爬取 xx 网站的时候 不返回给我数据 而且还甩一句话给我 “系统检测到您频繁访问,请稍后再来” 小帅b看了一下他的代码 ): requests.get(url) 瞬 ...
- 洛谷 1003 NOIP2011 D1T1 铺地毯
[题解] 因为只询问一个点,所以记录地毯信息,倒着找第一个符合条件的地毯就是在最上面的. #include<cstdio> #include<algorithm> #defin ...
- hdu 5170 精度控制
众所周知,GTY是一位神犇,为了更好的虐场,他从来不写数学作业而是去屠题,他的数学老师非常不爽,但由于GTY每次考试都AK,她也不能说什么,有一天老师在黑板上写了四个数——a,b,c,da,b,c,d ...
- 2.2 为什么要使用Shell脚本
使用脚本编程语言的好处是,它们多半运行在比编译型语言还高的层级,能够轻易处理文件与目录之类的对象.缺点是:它们的效率通常不如编译型语言.不过权衡之下,通常使用脚本编程还是值得的:花一个小时写成 ...
- 初识Scrapy——1—scrapy简单学习，伯乐在线实战、json数据保存
Scrapy——1 目录 什么是Scrapy框架? Scrapy的安装 Scrapy的运行流程 Scrapy的使用 实战:伯乐在线案例(json文件保存) 什么是Scrapy框架? Scrapy是用纯 ...
- 暑假集训D16总结
考试 日常爆炸= = T1 一看就是个树规,然而不会写方程= = T2 一看就是个分块,然而不会分= = T3 终于有点头绪,推了两个小时的30分部分分情况,然后打挂了= = 我玩个鬼啊 其实听完,觉 ...
- hdu 4971 多校10最大权闭合图
/* 很明显的最大权闭合图题 */ #include<stdio.h> #include<string.h> #include<queue> using names ...
- cogs 7. 通信线路
7. 通信线路 ★★ 输入文件:mcst.in 输出文件:mcst.out 简单对比时间限制:1.5 s 内存限制:128 MB 问题描述 假设要在n个城市之间建立通信联络网,则连通n ...