用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题：用HTML+CSS画出一个同心圆。
例如：
这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用。
1、html代码
- <body>
- <div id="circle_bot">
- </div>
- <div id="circle_mid">
- </div>
- <div id="circle_top">
- </div>
- </body>
html部分代码很简单，只需要三个DIV标签即可，记得分别命名，这样在CSS中方便单独选中。
2、CSS代码：
- <style type="text/css">
- #circle_bot{
- background-color:#E09;
- width: 150px;
- height: 150px;
- margin: 0px 0 0 0px;
- border-radius: 50%;
- }
- #circle_mid {
- background-color:#EAA;
- width: 100px;
- height: 100px;
- margin: -125px 0 0 25px;
- border-radius: 50%;
- }
- #circle_top{
- background-color:#ED9;
- width: 50px;
- height: 50px;
- margin: -75px 0 0 50px;
- border-radius: 50%;
- }
- </style>
分别用id选择器选中三个div，然后给予不同的背景色予以区分。
从底圆到顶圆依次设定宽高（事实上此时还是个正方形），按照位置设置偏移位置，margin的四个偏移值分别对应上、右、下、左的边距，负数则表示反方向。
border-radius是倒圆角，数值可以使用像素，为了简单起见设置50%则倒圆角的半径默认是该DIV宽度的50%。
用HTML+CSS画出一个同心圆的更多相关文章
- 情人节，教大家使用css画出一朵玫瑰花。
情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- WPF Blend 脑洞大开的问题：如何用Blend得到或画出一个凹槽、曲面。
原文:WPF Blend 脑洞大开的问题:如何用Blend得到或画出一个凹槽.曲面. 目标图: 步骤一(放置一个矩形,填充蓝色): 步骤二(复制该矩形,并调整边角,填充粉红色): 第三部:让图形部分重 ...
- 如何在canvas中画出一个太极图
先放一个效果图: 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...
- CSS画出的各种形状图
利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
随机推荐
- string中substr，find函数使用
2.string函数 find:某子串的起始位(0开始),函数的第二个参数使用代表从该位开始的后缀 substr:1) x开始的连续y位 2) x开始的后缀 #include<bits/stdc ...
- 【BZOJ】3282: Tree（lct）
http://www.lydsy.com/JudgeOnline/problem.php?id=3282 复习了下lct,发现两个问题.. 1:一开始我以为splay那里直接全部rot(x)就好了,然 ...
- Failed to load or instantiate TagLibraryValidator class: org.apache.taglibs.standard.tlv.JstlCoreTLV
今天在使用JSP,引入<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> ...
- mysql案例-sysbench安装测试
一 地址 githup地址https://github.com/akopytov/sysbench二 版本 sysbench 1.0.15 curl -s https://packagecloud.i ...
- 快速创建SpringBoot2.x应用之工具类自动创建web应用、SpringBoot2.x的依赖默认Maven版本
快速创建SpringBoot2.x应用之工具类自动创建web应用简介:使用构建工具自动生成项目基本架构 1.工具自动创建:http://start.spring.io/ 2.访问地址:http://l ...
- latex对齐问题
数学公式居中:可以在公式前后各加两个$$,就可以了 一行对齐:左对齐\leftline{内容} 居中\centerline{内容} 右对齐\rightline{内容} 多行或者段落对齐: 左对齐 \b ...
- 写好shell脚本的13个技巧【转】
有多少次,你运行./script.sh,然后输出一些东西,但却不知道它刚刚都做了些什么.这是一种很糟糕的脚本用户体验.我将在这篇文章中介绍如何写出具有良好开发者体验的 shell 脚本. 产品的最终用 ...
- 编码实现字符串类CNString实现运算符重载
题目描述: 编码实现字符串类CNString,该类有默认构造函数.类的拷贝函数.类的析构函数及运算符重载,需实现以下"="运算符."+"运算."[]& ...
- js导出excel表格中较长数字串会变成科学计数法问题
在做项目中,遇到导出excel表格时,银行账户号数字过长,导出的数字串变为计数法形式,如下图: 网上搜到解决方法,粘贴到这以供学习.不断更新. 原博地址:http://www.cnblogs.com/ ...
- zabbix3.0.4关于java服务端程序内存溢出的处理
关于java服务端程序内存溢出的处理 java服务端程序内存溢出会产生jvm.log文件,此时程序会挂掉,无法正常处理业务,需要重启服务 思路: 当存在jvm.log这个文件的时候则触发clean_j ...