border-radius:10px; /* 所有角都使用半径为10px的圆角 */

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。

实心上半圆：

方法：把高度(height)设为宽度(width)的一半，并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

  1. div{
  2. 　　height:50px;/*是width的一半*/
  3. 　　width:100px;
  4. 　　background:#9da;
  5. 　　border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
  6. 　　}

实心圆：

方法：把宽度(width)与高度(height)值设置为一致(也就是正方形)，并且四个圆角值都设置为它们值的一半。

  1. div{
  2. 　　height:100px;/*与width设置一致*/
  3. 　　width:100px;
  4. 　　background:#9da;
  5. 　　border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
  6. 　　}   
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>border-radius</www.dztcsd.com/title>
  6. <style type="text/css">
  7. div.circle{
  8.     height:100px;/*与width设置一致*/
  9.     width:100px;
  10.     background:#9da;
  11.     border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
  12.     }
  13. /*任务部分*/
  14. div.semi-circle{
  15.     height:100px;
  16.     width:50px;
  17.     background:#9da;
  18.     border-radius:?;
  19.     }   
  20.  
  21. </style>
  22. </head>
  23. <body>
  24. <div class="circle">
  25. </div>
  26. <br/>
  27. <!--任务部分-->
  28. <div class="semi-circle">
  29. </div>  
  30.  
  31. </body>
  32. </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. WebDriver(Selenium2) 根据新窗口title切换窗口

    http://uniquepig.iteye.com/blog/1559321 在webdriver官方的api中,切换窗口的方法提供的参数是nameOrHandle. 引用 http://uniqu ...

  2. php 命名空间的目的

    php引入命名空间的目的,就是为了防止不同的文件 标识符同名的问题,比如类.函数.变量同名导致冲突的问题.这才是根本的根本,了解指点,带着这个观念去学习php命名空间的相关知识,就不会云里雾里了,会比 ...

  3. PAT (Advanced Level) 1007. Maximum Subsequence Sum (25)

    简单DP. 注意:If all the K numbers are negative, then its maximum sum is defined to be 0, and you are sup ...

  4. (简单) POJ 2253 Frogger，Dijkstra。

    Description Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Fro ...

  5. laravel安装excel功能

    原文安装链接:https://github.com/Maatwebsite/Laravel-Excel 代码如下: if ($rows = DB::connection('glist')->ta ...

  6. CodeSmith批量生成实体

    保存以下文件为ModelBatch.cst <%@ Register Name="Model" Template="D:\Q\web\LHWYVISIT\trunk ...

  7. shell sed

      匹配 sed -n '/pattern/p' file_name |sed -n 7,12p #pattern是你要查的内容 #file_name是你要查的文件 以上实现:打印出匹配结果中的7-1 ...

  8. Struts2命令空间小结

    sturts2命名空间小结,以tomcat为服务器 1. 命名空间配置为“/” <package name="default" namespace="/" ...

  9. 转自他人——————TLE之前，没有一个节点叫失败！！！

    我想我十八年来记忆最深刻的夜晚,大概便是在吉林大学燥热的宿舍里,穿着橘黄色的短袖,努力咽下大口大口的雪碧.那天晚上我仰躺在吉大热得几乎不能入眠的床板上,一动不动,看夏夜里打不尽的蚊子在惨白的天花板下飞 ...

  10. UVa 10706 - Number Sequence

    题目大意:Sk表示从1到k的字符序列,如S4为1234,现如今有如下的序列S1S2...Sk,形如1 12 123 1234这样的序列,给一个数n,让你去这个序列第n个位置上的数字. 可以构建出一个S ...