参加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. sock_ntop.c

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <netinet/in ...

  2. GET和POST有什么区别？及为什么网上多数答案都是错的（转载）

    这仅仅是我认为比较好的关于get和post区别的解答,然后把作者的一些文字踢除留下比较干的部分. 作者:南柯之石链接:http://www.cnblogs.com/nankezhishi/archiv ...

  3. cetus系列~ 读写分离具体分析

    一 简介:上一章我们讲了cetus的基本安装,这章继续分析cetus 二 分析 1 基本配置       1 开启主从延迟检测需在后端数据库创建库proxy_heart_beat和表tb_heartb ...

  4. Django学习手册 - 登录装饰器

    # 装饰器定义 def auth(func): def inner(request,*args,**kwargs): v = request.COOKIES.get("user") ...

  5. android logger 日志工具

    https://github.com/orhanobut/logger 基础使用:https://blog.csdn.net/github_33304260/article/details/54799 ...

  6. Spring+SpringMVC+Mybatis整合(二)

    目录结构:

  7. struct 与 class 的区别

    C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据类型的数据结构了,它已经获取了太多的功能. struct能包含成员函数吗? 能! struct能继承吗? 能!! s ...

  8. CMake 实践教程

    本篇博客是根据 <<CMake Practice>> 一文编写, 目的有三: 其一: 提取出其中的精要部分; 其二: 对其中不易理解的地方进行简要说明; 其三: 方便后续查找复 ...

  9. Kaggle Titanic补充篇

    1.关于年龄Age 除了利用平均数来填充,还可以利用正态分布得到一些随机数来填充,首先得到已知年龄的平均数mean和方差std,然后生成[ mean-std,  mean+std ]之间的随机数,然后 ...

  10. 【转】htop使用详解--史上最强（没有之一）

    在管理进程时通常要借助一些工具,比较常用的就是ps和top了:不过CentOS还为我们提供了一个更加强大的工具htop,下面就来了解一下此工具的使用方法.一.安装htop htop工具在epel源中提 ...