不要指定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. 【自用代码】Json转对象

    private static object JsonToObject(string jsonString, object obj) { var serializer = new DataContrac ...

  2. vi 编辑器的使用

    1)    vi的自动对齐功能   我从window的网页上拷贝了一段代码到vi中,结果是不对齐的.见下图 此时为了对齐,我的做法是: ESC-v  进入视图模式,然后全选 再然后直接按 = 号. 然 ...

  3. 10g和11g，优化器对外连接的处理对比

    我反省,今天面试有个问题没有说清楚.我给出的结论(而且这个结论我验证过)是:不要使用不必要的外连接,举了下面这个例子却没有说清楚.虽然最近感冒,状态不是很好,但最擅长的东西都没有表达清楚,泪流满面啊: ...

  4. 树莓派上搭建基于Python+web.py+fastcgi+lighttpd的网站

    最近在网上淘了一个树莓派,什么是树莓派?这里是他的官方网站你可以去看看. 简单的说就是一块使用了ARM11的CPU,具有256MB或512MB内存的具有两个USB接口,一个RJ45接口,HDMI输出和 ...

  5. Servlet的一些API使用介绍

    final String rootPath = getServletConfig().getServletContext().getRealPath("/");  获取项目运行的根 ...

  6. nutch http file 截断问题

    问题: 列表页预计抽取 355+6 但实际只抽取到220条链接. 原因是nutch对http下载的内容的长度进行了限制. 解决方案:这里将这个属性扩大10倍. vim conf/nutch-defal ...

  7. ACMer程序员智力拾遗

           浏览网页偶得,遂记录下来,每天进步一点点--        博客园真是个不错的平台,今天我让师姐也注册了--        学会分享吧,孩子们-- 一.编程中无穷大量的设置        ...

  8. Code First 指定外键名称

    指定类外键有注释(DataAnnotation)和FluentAPI两种方式, 目前掌握的知识我们先把DataAnnotation可用的四种方式总结如下 第一种方法: //1-指定导航属性,会自动生成 ...

  9. easyui datagrid单击单元格选择此列

    示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...

  10. 学以致用:让visualstudio爱上sublime

    前言: 经常在vs中工作,但是一些编辑工作却非常喜欢sublime的方式,如果你也是,那我们来当媒婆吧,哈哈. 准备:       Visualstudio一枚        Sublime一枚   ...