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相似,可以四个角 ...
随机推荐
- javascript的 replace() 方法的使用讲解
String.prototype.replace() The replace() method returns a new string with some or all matches of a p ...
- 二分查找javascript
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- tooltip 鼠标移动上去出现图片或文字与title大同小异
代码如下: <script type="text/javascript" src="jquery-1.3.2.min.js"></script ...
- angularJS 系列（三）- 自定义 Service
参考:http://viralpatel.net/blogs/angularjs-service-factory-tutorial/ https://www.pluralsight.com/blog/ ...
- php 设计模式系列（一）
参考文章:http://duchengjiu.iteye.com/blog/2227452 多态代码 // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什 ...
- opencv图像特征检测之斑点检测
前面说过,图像特征点检测包括角点和斑点,今天来说说斑点,斑点是指二维图像中和周围颜色有颜色差异和灰度差异的区域,因为斑点代表的是一个区域,所以其相对于单纯的角点,具有更好的稳定性和更好的抗干扰能力. ...
- NMEA协议 上位机 C# (转)
源:NMEA协议 上位机 c# 前些时间写做了两款用NMEA协议的上位机,在这里做一个总结和记录.和大家分享,也为了以后不会忘记. NMEA协议总体来说,相对简单,是气象上比较成熟的协议. 主要有以下 ...
- 原理图及PCB设计
原理图以及元件的绘制1. 画数据总线时,需要给总线一个Net Label,例如:databus[0..7],并且还需要在每个入口和出口处设置一致的标号.2. ERC 电气规则检查,Electronic ...
- 微信小程序一些简单的快捷键
常用快捷键 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块Ctrl+C Ctrl+V:复制粘贴,如果没有选 ...
- Undefined symbols for architecture armv7错误解决方法
Undefined symbols for architecture armv7: "_OBJC_CLASS_$_BriefMainModel", referenced from: ...