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日国内票房过亿,基 ...
随机推荐
- Windows平台下Qt开发环境的搭建
Qt 是采用开源和商用双协议发布的开放源代码的图形开发类库,现在很多图形化的开源软件都使用了Qt. 下载地址:http://qt-project.org/downloads 1. 下载安装包 你可以从 ...
- mac中的xampp配置xdebug
[xdebug] zend_extension=/Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20121212/ ...
- css3流式布局
css3布局方式: 不推荐使用float,有时候使用浮动的时候,对于可适应的流氏布局,无法胜任. 推荐使用css3的display:webkit-box. 使用的html代码 <div clas ...
- scrapy使用爬取多个页面
scrapy是个好玩的爬虫框架,基本用法就是:输入起始的一堆url,让爬虫去get这些网页,然后parse页面,获取自己喜欢的东西.. 用上去有django的感觉,有settings,有field.还 ...
- 数据添加到DataTable
DataTable tblDatas = new DataTable("Datas"); DataColumn dc = null; ...
- gcc向待编译源文件传入参数的方法
gcc有两种方法向待编译源文件传入参数 第一种 利用–Dmacro=name 编译选项,详见gcc -D选项 第二种 利用链接脚本(*.lds)传入参数,类似于ADS的编译器参数可以被待编译源文件调用 ...
- 分页加查询的sql语句
"SELECT TOP(@pagesize) * FROM T_News WHERE(NewsTitle LIKE @newskey OR NewsContent LIKE @newskey ...
- Tomcat基础教程（四）
一.将Web应用部署到Tomcat中 为什么要部署?将Web应用部署到Tomcat中,那么Tomcat就能找到相应的Web应用,当Tomcat启动时就会加载和初始化Web应用,而在Tomcat启动后, ...
- 【转载】C# HttpWebRequest 发送SOAP XML
调用webservice的几种方法: 方法一:添加web引用(简单/方便 局限客户端是.net) 方法二:Post xml(本文重点讲述) 方法三:使用微软MSXML2组件(好像在window ser ...
- csu 10月 月赛 I 题 The Contest
Description 殷犇有很多队员.他们都认为自己是最强的,于是,一场比赛开始了~ 于是安叔主办了一场比赛,比赛有n个题目,每个题目都有一个价值Pi和相对能力消耗Wi,但是有些题目因为太坑不能同时 ...