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是向元素添加圆角边框的方法的更多相关文章

  1. 向 div 元素添加圆角边框:

    div { border:2px solid; border-radius:25px; }

  2. HackTwelve 为背景添加圆角边框

    1.概要:     ShapeDrawable是一个为UI控件添加特效的好工具.这个技巧适用于那些可以添加背景的控件 2.添加圆角边框其实就是添加的背景那里不是直接添加图片,而是添加一个XML文件即可 ...

  3. border-radius给元素加圆角边框

    border-radius给元素加圆角边框 例: border-radius:20px; /*所有角都使用半径为20px的圆角*/ 实心圆: 把宽度(width)与高度(height)值设置为一致(也 ...

  4. JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  5. select元素添加option的add()方法 | try{}catch{}

    1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...

  6. android的ListView做表格添加圆角边框

    边框,圆角,都可以实现的 在drawable目录下添加view_yuan_morelist.xml,设置控件的边框代码.如下: <?xml version="1.0" enc ...

  7. 向div添加圆角边框

    初级参数:border-radius: 4px;中级参数:border-radius: 4px 6px 6px 4px;终极参数:border-radius: 5px 5px 3px 2px / 5p ...

  8. jquery给元素添加样式表的方法

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  9. css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

随机推荐

  1. 简单的java高斯模糊算法

    import java.awt.Color; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOEx ...

  2. Laravel Auth验证

    laravel自带了auth类和User模型来帮助我们很方便的实现用户登陆.判断. 首先,先配置一下相关参数 app/config/auth.php: model 指定模型 table 指定用户表 p ...

  3. linux iptables 相关设置

    首先在使用iptables之前敲入一下两条命令 > iptables -F   #这句话的意思是清空所有的链 > iptables -X  #这句话的意思是清空所有自定义的链 以上两条的含 ...

  4. JAV基础语法之---数据类型转换

    数制转换": 1.string 转 byte[] String str = "Hello";byte[] srtbyte = str.getBytes(); 2.byte ...

  5. Nginx 中 nginx.conf 详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  6. PHP 正则小解

    正则表达式(Regular Expression) 正则表达式系统: 1.POSIX 2.Perl PHP中使用的regex是PCRE: NOTE:PCRE(Perl兼容正则表达式,Perl Comp ...

  7. javascript之日期对象

    学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在j ...

  8. Online Schema Change for MySQL

    It is great to be able to build small utilities on top of an excellent RDBMS. Thank you MySQL. This ...

  9. Android之layout_weight属性详解

    博文:http://www.cnblogs.com/net168/p/4227144.html讲分非常好,推荐下

  10. fastcgi_param 详解

    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;#脚本文件请求的路径 fastcgi_param QUERY_STRI ...