参加web前端校招的同学们经常会遇到这样的面试题：用HTML+CSS画出一个同心圆。

例如：

这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用。

1、html代码

  1. <body>
  2. <div id="circle_bot">
  3. </div>
  4. <div id="circle_mid">
  5. </div>
  6. <div id="circle_top">
  7. </div>
  8. </body>

html部分代码很简单，只需要三个DIV标签即可，记得分别命名，这样在CSS中方便单独选中。

2、CSS代码：

  1. <style type="text/css">
  2. #circle_bot{
  3. background-color:#E09;
  4. width: 150px;
  5. height: 150px;
  6. margin: 0px 0 0 0px;
  7. border-radius: 50%;
  8. }
  9. #circle_mid {
  10. background-color:#EAA;
  11. width: 100px;
  12. height: 100px;
  13. margin: -125px 0 0 25px;
  14. border-radius: 50%;
  15. }
  16. #circle_top{
  17. background-color:#ED9;
  18. width: 50px;
  19. height: 50px;
  20. margin: -75px 0 0 50px;
  21. border-radius: 50%;
  22. }
  23. </style>

分别用id选择器选中三个div，然后给予不同的背景色予以区分。

从底圆到顶圆依次设定宽高（事实上此时还是个正方形），按照位置设置偏移位置，margin的四个偏移值分别对应上、右、下、左的边距，负数则表示反方向。

border-radius是倒圆角，数值可以使用像素，为了简单起见设置50%则倒圆角的半径默认是该DIV宽度的50%。

用HTML+CSS画出一个同心圆的更多相关文章

  1. 情人节，教大家使用css画出一朵玫瑰花。

    情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...

  2. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  6. WPF Blend 脑洞大开的问题：如何用Blend得到或画出一个凹槽、曲面。

    原文:WPF Blend 脑洞大开的问题:如何用Blend得到或画出一个凹槽.曲面. 目标图: 步骤一(放置一个矩形,填充蓝色): 步骤二(复制该矩形,并调整边角,填充粉红色): 第三部:让图形部分重 ...

  7. 如何在canvas中画出一个太极图

    先放一个效果图: 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...

  8. CSS画出的各种形状图

    利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...

  9. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

随机推荐

  1. MySQL锁解决并发问题详解

    文章分为以下几个要点 问题描述以及解决过程 MySQL锁机制 数据库加锁分析 下面讨论的都是基于MySQL的InnoDB. 0. 问题描述以及解决过程 因为涉及到公司利益问题,所以下面很多代码和数据库 ...

  2. dp题

    1.luogu 1484种树 50分思路:dp,但是数据规模过大没法dp选择奇怪贪心 dp方程 到i坑种j树 dp[i][j]=max(dp[i-1][j],dp[i-2][j-1]) 100分思路: ...

  3. BZOJ3527 [Zjoi2014]力 【fft】

    题目 给出n个数qi,给出Fj的定义如下: 令Ei=Fi/qi,求Ei. 输入格式 第一行一个整数n. 接下来n行每行输入一个数,第i行表示qi. 输出格式 n行,第i行输出Ei.与标准答案误差不超过 ...

  4. Java——集合

    Java的集合类是一种非常有用的工具类,用于存储多个对象.它是一个容器,可以把多个对象放到里面. Java集合分三种情况: Set:无序.不可重复 List:有序.可重复 Map:具有映射关系 Col ...

  5. 20155330 2016-2017-2 《Java程序设计》第六周学习总结

    20155330 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 学习目标 理解流与IO 理解InputStream/OutPutStream的继承架构 理解 ...

  6. nginx 全局配置

    nginx 全局配置 #user nobody; # user 主模块 ,指定nginx worker 进程的运行用户组 worker_processes ; # worker_processes 开 ...

  7. HDU4738 Caocao's Bridges【强连通】

    题意: 曹操有N个岛,这些岛用M座桥连接起来,每座桥有士兵把守(也可能没有),周瑜想让这N个岛不连通,但只能炸掉一座桥,并且炸掉一座桥需要派出不小于守桥士兵数的人去,桥的守兵数为0时,也需要派出一个人 ...

  8. Centos7编译hadoop异常:Received fatal alert: handshake_failure

    保持网络畅通 或者 配置代理 能够访问cdh的仓库 https://repository.cloudera.com/artifactory/cloudera-repos/ 编译hadoop版本 had ...

  9. jquery 学习(六) - 事件绑定

    HTML <!--绑定事件--> <div class="a1"> <button class="bt">按钮</bu ...

  10. Linux 内核里的“智能指针”【转】

    转自:http://blog.jobbole.com/88279/ 众所周知,C/C++语言本身并不支持垃圾回收机制,虽然语言本身具有极高的灵活性,但是当遇到大型的项目时,繁琐的内存管理往往让人痛苦异 ...