不要指定border-width属性：

<html>

<style type="text/css">

div{

    border-style: solid;

    background-color: #f00;

    border-width: 50px;

    border-radius: 50px;

    width: 100px;

    height: 100px;

}

</style>

<body>

    <div></div>

</body>

</html>

效果：

去掉border-width属性

<html>

<style type="text/css">

div{

    border-style: solid;

    background-color: #f00;

    border-radius: 50px;

    width: 100px;

    height: 100px;

    background-color: #000;

}

</style>

<body>

    <div></div>

</body>

</html>

效果：

怎么是106和106？

去掉

border-style: solid;
<html>

<style type="text/css">

div{

    background-color: #f00;

    border-radius: 50px;

    width: 100px;

    height: 100px;

}

</style>

<body>

    <div></div>

</body>

</html>

所以如果你想要在:before中画一个圆，则必须让:before是一个block

<html>

<style type="text/css">

div{

    margin: 400px;

}

div:before{

    content: "";

    display: block;

    background-color: #f00;

    border-radius: 50px;

    width: 100px;

    height: 100px;

}

</style>

<body>

    <div></div>

</body>

</html>

div border-radius画圆的更多相关文章

  1. h5画圆

    下面一段代码是,h5的画圆,半圆,四分之一圆等效果 <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. css画圆

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  3. ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆

    一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...

  4. javascript画直线和画圆的方法（非HTML5的方法）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 中点Bresenham画圆

    这里不仔细讲原理,只是把我写的算法发出来,跟大家分享下,如果有错误的话,还请大家告诉我,如果写的不好,也请指出来,一起讨论进步. 算法步骤: (1) 输入圆的半径R. (2) 计算初始值d = 1 - ...

  7. H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

    一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...

  8. Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

  9. IOS 绘制基本图形（ 画圆、画线、画圆弧、绘制三角形、绘制四边形）

    // 当自定义view第一次显示出来的时候就会调用drawRect方法- (void)drawRect:(CGRect)rect { // 1.获取上下文 CGContextRef ctx = UIG ...

  10. Bing必应地图中国API - 在地图上画圆

    Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37|  分类: Bing&Google|字号 订阅     <变形金刚2>上映4日国内票房过亿,基 ...

随机推荐

  1. javascript tab onclick

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  2. 【 java版坦克大战--事件处理】 键盘控制小球上下左右移动

    上一节已经学习了事件处理,这一节需要完成通过键盘的上下左右键控制小球移动. 然后再通过应用到我们绘制的坦克上. /** * 加深对事件处理机制的理解 * 通过光标的上下左右键,控制小球的左右上下移动. ...

  3. NDK_ROOT找不到的解决方法 MACOS

    只要在Eclipse上进行配置就行了,看图说话  

  4. android中LayoutInflater详解与使用

    android的LayoutInflater用来得到一个布局文件,也就是xxx.xml,而我们常用的findviewbyid是用来取得布局文件里的控件或都布局.inflater即为填充的意思,也就是说 ...

  5. iOS代码规范文档

    文件命名规范: 1. 项目统一使用类前缀ZY. 2. 分类命名+后面统一使用ZYExtension,例:NSDictionary+ZYExtension.h,常用分类定义在内部并写好文档注释.如果功能 ...

  6. docker下使用caffe的命令记录

    查看所有的images sudo docker images 利用某个image生成container sudo docker run -it --net=host -v /home/tingting ...

  7. Java多线程初学者指南（12）：使用Synchronized块同步变量

    我们可以通过synchronized块来同步特定的静态或非静态方法.要想实现这种需求必须为这些特性的方法定义一个类变量,然后将这些方法的代码用synchronized块括起来,并将这个类变量作为参数传 ...

  8. uva 1453 - Squares

    旋转卡壳算法: 直接在这个上面粘的模板 主要用途:用于求凸包的直径.宽度,两个不相交凸包间的最大距离和最小距离··· 这题就是求凸包的直径 #include <cstdio> #inclu ...

  9. tornado异步请求非阻塞

    前言也许有同学很迷惑:tornado不是标榜异步非阻塞解决10K问题的嘛?但是我却发现不是torando不好,而是你用错了 比如最近发现一个事情:某网 前言 也许有同学很迷惑:tornado不是标榜异 ...

  10. USB做Host的OTG原理

    在介绍USBOTG的基础上,着重介绍Maxim公司的MAX3301E型USBOTG电路的特点.内部结构和工作原理. 1 引言 随着USB2.0版本的发布,USB越来越流行,已经成为一种标准接口.现在, ...