不要指定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. SQL 添加字段和默认值脚本

    --插入字段和默认值alter table Acc_WayBill add DeclaredValue nvarchar(50)goEXEC sys.sp_addextendedproperty @n ...

  2. winform 两个TreeView间拖拽节点

    /// <summary> /// 正在拖拽的节点 /// </summary> private TreeNode DragNode = null; /// <summa ...

  3. svg学习笔记（二）

    SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w ...

  4. Laravel Repository 模式

    Repository 模式 为了保持代码的整洁性和可读性,使用Repository Pattern 是非常有用的.事实上,我们也不必仅仅为了使用这个特别的设计模式去使用Laravel,然而在下面的场景 ...

  5. 【MS Office2013小技巧】Word中公式中的等号对齐

    步骤: 1. 先将所需要对齐的公式分不同行打出来: 2. 选中所有公式,右键点击并选择“对齐点(A) =”,如图 此时,如果能够正常对齐,则无需进行下面的步骤,但如果出现下图情况并未正常对齐的,再进行 ...

  6. IE8下String的Trim()方法失效的解决方法

    String的Trim()方法失效,在ie8下是有这样的情况的,解决方法也很简单使用$.trim(str)即可,需要的朋友可以了解下 用jquery的trim()方法,$.trim(str)就可以了.

  7. BZOJ 1648: [Usaco2006 Dec]Cow Picnic 奶牛野餐

    Description The cows are having a picnic! Each of Farmer John's K (1 <= K <= 100) cows is graz ...

  8. 四校训练 warm up 14

    A:Pythagoras's Revenge 代码: #include<cstdio> #define ll long long using namespace std; int main ...

  9. Android Training精要（五）讀取Bitmap對象實際的尺寸和類型

    讀取Bitmap對象實際的尺寸和類型 BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecode ...

  10. asp.net Context.User.Identity.Name说明

    今天做了一个身份验证页面,基本实现功能,却不能显示当前用户姓名,自己MSDN半天一无所获,问题就在Context.User.Identity.Name:Context是HttpContext类,Use ...