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 DisplayManager 服务解析一
ANDROID从版本4.2开始提供了一个显示管理服务DisplayManagerService,支持多种显示类型的多个显示器的镜像显示,包括内建的显示类型(本地).HDMI显示类型以及支持WIFI D ...
- Raspberry Pi 上使用WN725N连接WIFI
系统版本 lee@Lee-RPi ~ $ uname -ar Linux Lee-RPi + # PREEMPT Thu Dec :: GMT armv6l GNU/Linux 这个版本的系统,已经集 ...
- Linux的iptables常用配置范例（3）
编辑/etc/rc.local,加入iptables -t nat -A POSTROUTING -s 192.168.0.0/24 -o eth1 -j MASQUERADE,外网口eth1为dhc ...
- CentOS 6.5 GIT 服务器搭建
环境: Git Sserver IP: 10.6.0.2 Git Client IP: 10.6.0.126 1. 在 Git Server 安装软件所需的依赖包 yum install curl-d ...
- awk简单用法
awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...
- iOS开发——闪光灯
还是那句很欠揍的话,没啥难度,直接上代码. // // ViewController.m // Demo—闪光灯 // // Created by yyt on 16/4/21. // Cop ...
- arm-linux-gnueabi和arm-linux-gnueabihf 的区别
转载整理自:http://www.cnblogs.com/xiaotlili/p/3306100.html 一. 什么是ABI和EABI1 .ABI ABI(二进制应用程序接口-Application ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- JS 中 Class - 类创建
Class - 类创建 Class类实现了在JavaScript中声明一个新的类, 并通过构造函数实例化这个类的机制.通过使用Class.create()方法, 你实际上声明了一个新的类, 并定义了一 ...
- StackExchange.Redis 官方文档(三) Events
事件 ConnectionMultiplexer类型提供了很多可以用来了解表面状态下正在发生着什么的事件.这对日志是很有用的. ConfigurationChanged - ConnectionMul ...