参加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. 绕过CDN查看网站真实IP的一些办法

    验证是否存在CDN最简单的办法 通过在线的多地ping,通过每个地区ping的结果得到IP. 看这些IP是否一致,如果都是一样的,极大可能不存在cdn,但不绝对. 如果这些IP大多数都不太一样或者规律 ...

  2. 虚拟机centos7系统下安装hadoop ha和yarn ha（详细）

    一:基础环境准备 (一):虚拟机新建五个centos7系统(复制文件夹的方式) (二):角色分配 (三)按照角色分配表配置 (1)更改主机ip(自行查找),如果只是个人搭建玩一玩,可选择安装cento ...

  3. C++内存管理（转）http://www.cnblogs.com/qiubole/archive/2008/03/07/1094770.html

    [导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...

  4. Nginx 虚拟主机示例

    Nginx server 模块 server { // 标识虚拟主机开始 listen ; ## // 指定虚拟主机服务器端口 server_name localhost; // 指定 IP地址或者域 ...

  5. Ubuntu16.04安装搜狗拼音输入法（中文输入法）

    虽然网上有很多教程,但是我觉得我的很适合那些真正的小白... 1.下载文件 由于我要给多台电脑安装搜狗输入法,所以用的是文件夹安装,不是命令行安装. 打开官网http://pinyin.sogou.c ...

  6. 第18月第25天 github下载单个文件夹 git命令

    1. 用 SVN 即可. 举例说明: 譬如这个项目: Mooophy/Cpp-Primer · GitHub, 我只想看 ch03 文件夹的代码怎么办? 先打开 ch03, 其 URL 为: &quo ...

  7. [转]find命令之exec

    find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了. exec解释:    -exec  参数后面跟的是comm ...

  8. NSURLResponse下载

    // // ViewController.m // 05-NSURLConnestion(下载) // // Created by jerry on 15/10/24. // Copyright (c ...

  9. 【黑客免杀攻防】读书笔记5 - PE格式讲解

    0x01 MS-DOS头 MS-DOS头部的字段重点关注e_magic与最后一个e_lfanew是需要关注的. 第一个e_magic字段的值为4D5A,作用是可以作为判断这个文件是否是PE文件. 最后 ...

  10. freeRTOS中文实用教程4--资源管理概述

    1.前言 多任务系统中存在一种潜在的风险.当一个任务在使用某个资源的过程中,即还没有完全结束对资源的访问时,便被切出运行态,使得资源处于非一致,不完整的状态 2.并发抢占导致错误的场景 (1)访问外设 ...