border-radius是向元素添加圆角边框的方法
border-radius:10px; /* 所有角都使用半径为10px的圆角 */
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。
实心上半圆：
方法：把高度(height)设为宽度(width)的一半，并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}
实心圆：
方法：把宽度(width)与高度(height)值设置为一致(也就是正方形)，并且四个圆角值都设置为它们值的一半。
div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</www.dztcsd.com/title>
<style type="text/css">
div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:?;
} </style>
</head>
<body>
<div class="circle">
</div>
<br/>
<!--任务部分-->
<div class="semi-circle">
</div> </body>
</html>
以上就是小二为大家带来的border-radius是向元素添加圆角边框的方法的全部内容了，希望对大家有所帮助。
如有帮助请给小二来一波打赏
border-radius是向元素添加圆角边框的方法的更多相关文章
- 向 div 元素添加圆角边框：
div { border:2px solid; border-radius:25px; }
- HackTwelve 为背景添加圆角边框
1.概要: ShapeDrawable是一个为UI控件添加特效的好工具.这个技巧适用于那些可以添加背景的控件 2.添加圆角边框其实就是添加的背景那里不是直接添加图片,而是添加一个XML文件即可 ...
- border-radius给元素加圆角边框
border-radius给元素加圆角边框 例: border-radius:20px; /*所有角都使用半径为20px的圆角*/ 实心圆: 把宽度(width)与高度(height)值设置为一致(也 ...
- JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
- select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...
- android的ListView做表格添加圆角边框
边框,圆角,都可以实现的 在drawable目录下添加view_yuan_morelist.xml,设置控件的边框代码.如下: <?xml version="1.0" enc ...
- 向div添加圆角边框
初级参数:border-radius: 4px;中级参数:border-radius: 4px 6px 6px 4px;终极参数:border-radius: 5px 5px 3px 2px / 5p ...
- jquery给元素添加样式表的方法
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
随机推荐
- python之路：进阶篇 内置函数
li = [11, 22, 33] news = map( li = [100, 2200, 3300] news = map( [13, 24, 35] [11, 11, 11] [22, 4 ...
- mtp
http://www.android.gs/mount-google-nexus-4-mtp-sd-card-on-ubuntu-and-other-linux-computers/ https:// ...
- (中等) CF 576D Flights for Regular Customers (#319 Div1 D题)，矩阵快速幂。
In the country there are exactly n cities numbered with positive integers from 1 to n. In each city ...
- 已有 JS 模块化和打包方案收集
模块化方案 RequireJS AMD 方案, 常用的 define 语法, 异步加载模块, 目前很多支持: 官网 http://requirejs.org/ Github https://githu ...
- Linux 最简单的驱动程序hello world
图片驱动位置:kernel3-10/driver/misc/mediatek/imgsensor/src/mt8127/kd_sensorlist.c 例子:kernel-3.10/driver/mi ...
- python_eval的用法
1. eval用法: 将字符串str当成有效的表达式来求值并返回计算结果. 2. eval的功能: math当成一个计算器很好用. 将字符串转换为list,tuple,dict. 3. 举例 # -* ...
- 关于 HTML5、Jquery、Phonegap 跨域问题的研究
近期研究Phonegap的相关技术,遇到了服务资源访问的跨域.经过尝试使用服务器端的代理,Phonegap打包后不能够访问到相应资源.在搜索引擎的帮助下,找到了Jquery的jsonp的方式,尝试发现 ...
- MAP--复杂map结构的构造
我的关键结构比如 struct{ int a; int b; int c; }s: 因为这三个数据是基本信息,可以唯一区别一个设备.拿这样一个数据结构作为索引就能找到每个设备. ...
- spring 自动化构建项目
STS 3.7.0.RELEASE http://spring.io/tools/sts/legacy
- shell基本理论知识
(1)查看系统上安装了哪些shell # cat /etc/shells # /etc/shells: valid login shells /bin/sh /bin/dash /bin/bash / ...