不要指定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. datatable的数据转置

    没有具体测试过,5w条数据在i5机器上大概是1.3~2s左右,但是个人感觉就是在处理数据库的分页或者是写条件的时候会有一些麻烦,不如使用数据库分页! 但是这种方法不失为一种思路 private voi ...

  2. 回顾javase点滴

    数据类型 8种基本数据类型和引用类型 数据类型 占用位数 存储方式 最小值 最大值 默认值 byte 8 1+7 -128(-2^7) 127(2^7-1) 0 short 16 1+15 -3276 ...

  3. php中文编码

    header("Content-type: text/html; charset=utf-8"); header('Location: http://www.example.com ...

  4. struts2整合jfreechart

    需要的包: struts2-jfreechart-plugin-2.2.1.1.jar jfreechart-1.0.13.jar jcommon-1.0.17.jar 前台jsp页面中可以使用ifr ...

  5. STM32之SD卡

    目录 一.SD卡概述 1.定义 2.容量等级 3.SD卡框图 4.SD卡与TF卡的区别 二. SD卡内部结构 1. SD卡内部结构简图 2. 存储阵列结构图 3.Buffer 4.“存储阵列Block ...

  6. MVC引用CSS文件の正确姿势

    你的css文件目录结构: 将路径写入BundleConfig规则中: using System.Web; using System.Web.Optimization; namespace XXXX { ...

  7. ASP.NET注意事项

    1.服务器上bin目录下面的dll备份的时候,第一个点号之前的名字不能是一样的,否则会报错. 2.

  8. 第 8 章 适配器模式【Adapter Pattern】

    以下内容出自:<<24种设计模式介绍与6大设计原则>> 好,请安静,后排聊天的同学别吵醒前排睡觉的同学了,大家要相互理解嘛.今天讲适配器模式,这个模式也很简单,你笔记本上的那个 ...

  9. 制作qtopia-2.2.0和qt4文件系统

    转自 rootfs_qtopia_qt4.img 1. 解压rootfs_qtopia_qt4-20100816.tar.gz,得到目录rootfs_qtopia_qt4,里面内容比较大,超过了64M ...

  10. windows下DOS命令中查看被占用端口的进程

    今天在用tomcat 运行项目时报错:   java.net.BindException: Address already in use: JVM_Bind这个错误   刚开始有点怀疑是javaw.e ...