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相似,可以四个角 ...
随机推荐
- Android中通过pid获取app包名
String callerPackage = getAppNameByPID(getContext(), Binder.getCallingPid()); private String getAppN ...
- CentOSx64 安装 Gearmand 和 Gearman php扩展
1.首先下载所需软件 wget https://github.com/downloads/libevent/libevent/libevent-2.0.20-stable.tar.gz wg ...
- 不小心删掉root目录......
1.先保存还剩下的的东西,比如说桌面的文件,保存在/下面其他目录 2.执行命令 cp -R /etc/skel/.[!.]* ./ 3.reboot
- ARM裸机开发中内存管理库RT_HEAP的使用
在使用arm芯片进行裸机开发的时候,很多时候都需要内存管理的功能,我们可以使用自己写的内存管理程序,也可以直接使用标准库,不过我一般比较喜欢标准库,速度快,今天就来说说在C语言环境下怎么样进行内存的动 ...
- JQuery实现超链接鼠标提示效果
一.第一种方法用Jquery<p><a href="http://www.nowamagic.net/" class="tooltip" ti ...
- 微信小程序登录
一. 小程序不支持cookie会话 1. 通过传递与检验3rd_session来保持会话 2. 3rd_session可以执行'`head -n 80 /dev/urandom | tr -dc A- ...
- UWP_小说在线阅读器：功能要求与技术要求
学了WP开发也有一年了,也没做过什么软件的.17年进发UWP,锻炼自己一下.做一个开源的小说阅读器吧. 既然开发一个软件.所以要设计一下吧. 功能要求: 可能要用到的技术,这个吗,这就是遇到问题在解决 ...
- 怎样编制excel序列目录
怎样编制序列目录 原帖内容:http://www.excelpx.com/forum.php?mod=viewthread&tid=164190&extra=%26page%3D1&a ...
- Struts2验证
一.声明式验证 1.字段验证 fielderror的两种显示方式 fielderror的提示信息可以国际化 2.非字段验证:actionErrors / <s:actionerror> 例 ...
- vim中多行注释 和 删除多行注释
1.多行注释: a. 按下ctrl + v,进入列模式; b. 在行首选择需要注释的行; c. 按下"I",进入插入模式: d. 然后输入注释符("//&q ...