不要指定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. 网站前端优化 -saveForSelf

    九.网站前端优化 – IMG 9.1.可以优化的图片 图片总共可以分为两类,一个是CSS IMAGES,另一个是产品图片. 9.2.CSS IMAGES CSS图片现在采用的方式是图片合并的方式,这样 ...

  2. html5有什么布局标签

    header h1 nav ul li a section(id) div h3 article figure img article h4 header time datetime='' body ...

  3. github配置和git学习

    参考:http://www.eoeandroid.com/thread-272837-1-1.html http://blog.csdn.net/hcbbt/article/details/11651 ...

  4. WPF界面特殊字符处理

          界面XAML不支持< .>.&."等字符. 使用字符实体编码进行替代,以下是pro WPF 4.5的摘要表 Special Character        ...

  5. SQL Server执行计划

    要理解执行计划,怎么也得先理解,那各种各样的名词吧.鉴于自己还不是很了解.本文打算作为只写懂的,不懂的懂了才写. 在开头要先说明,第一次看执行计划要注意,SQL Server的执行计划是从右向左看的. ...

  6. 数位DP入门之hdu 3652 B-number

    hdu 3652 B-number Problem Description A wqb-number, or B-number for short, is a non-negative integer ...

  7. ubuntu下SVN服务器安装配置

    SVN服务器端: 1.安装包 $ sudo apt-get install subversion 2.添加svn管理用户及subversion组 $ sudo adduser svnuser $ su ...

  8. php自学笔记1

    PHP(Personal Home Page的缩写,现已更名Hypertext Preprocessor“超文本预处理器”)静态web开发:html,内容一成不变动态web开发: php(Zend). ...

  9. WiFi无线模块学习1——HLK-M30使用

    产品概述 概述: 通过该模块,传统的串口设备在不需要更改任何配置的情况下,即可通过Internet 网络传输自己的数据.为用户的串口设备提供完整快读的解决方案. 技术参数 可查询技术规格表 主要应用领 ...

  10. 引用Excel时 未在本地计算机上注册ace.oledb.12.0

    可能由于未安装数据库补丁 下载地址http://download.microsoft.com/download/7/0/3/703ffbcb-dc0c-4e19-b0da-1463960fdcdb/A ...