div border-radius画圆
不要指定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画圆的更多相关文章
- h5画圆
下面一段代码是,h5的画圆,半圆,四分之一圆等效果 <!DOCTYPE html> <html lang="en"> <head> <me ...
- css画圆
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...
- javascript画直线和画圆的方法（非HTML5的方法）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 中点Bresenham画圆
这里不仔细讲原理,只是把我写的算法发出来,跟大家分享下,如果有错误的话,还请大家告诉我,如果写的不好,也请指出来,一起讨论进步. 算法步骤: (1) 输入圆的半径R. (2) 计算初始值d = 1 - ...
- H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入
一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...
- Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））
Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...
- IOS 绘制基本图形（ 画圆、画线、画圆弧、绘制三角形、绘制四边形）
// 当自定义view第一次显示出来的时候就会调用drawRect方法- (void)drawRect:(CGRect)rect { // 1.获取上下文 CGContextRef ctx = UIG ...
- Bing必应地图中国API - 在地图上画圆
Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37| 分类: Bing&Google|字号 订阅 <变形金刚2>上映4日国内票房过亿,基 ...
随机推荐
- 关于angular 自定义directive
关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp& ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- 小笔记(一)：ajax传递数组及将ajax返回数据赋值
当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,conten ...
- html渐隐轮播
这是我之前用的时候从一个模板中下载下来用的,现在又用到了,我又重新找了一遍,为防止我下次用到忘记,特写下此文: 下载插件:jquery-2.1.4.min.js和slider.js 首页轮播页面首页i ...
- Java RMI（远程方法调用）开发
参考 https://docs.oracle.com/javase/7/docs/platform/rmi/spec/rmi-arch2.html http://www.cnblogs.com/wxi ...
- php设计模式笔记：单例模式
php设计模式笔记:单例模式 意图: 保证一个类仅有一个实例,并且提供一个全局访问点 单例模式有三个特点: 1.一个类只有一个实例2.它必须自行创建这个实例3.必须自行向整个系统提供这个实例 主要实现 ...
- Ubuntu15.10 编译VLC Android（安卓）过程记录
持续更新中... 最后一次修改于 2016-03-20 15:33:45 1.必要库的安装 除基本编译环境(gcc.g++等外),需要额外安装如下的库(用于下载必要的依赖文件) (1)JDK 推荐安装 ...
- STM32系列命名规则
转自:STM32系列命名规则 STM32 F 103 C 6 T 7 xxx 1 2 3 4 5 6 7 8 第1部分:产品系列名,固定为STM32 第2部分:产品类型:F表示这是Flash产品,目前 ...
- 致命错误： Python.h：没有那个文件或目录
In file included from greenlet.c:5:0: greenlet.h:8:20: 致命错误: Python.h:没有那个文件或目录 编译中断. error: Setup s ...
- Win7系统Matlab2013a安装.m文件不自动关联到MATLAB.exe解决方法
1.在matlab命令行中输入以下代码: cwd=pwd; cd([matlabroot '\toolbox\matlab\winfun\private']); fileassoc('add',{'. ...