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. HTTPS连接前的几毫秒发生了什么？

    原文:http://blog.jobbole.com/48369/ 提示:英文原文写于2009年,当时的Firefox和最新版的Firefox,界面也有很大改动.以下是正文. 花了数小时阅读了如潮的好 ...

  2. php中print_r 和var_dump 打印变量的区别。

    <?php $arr = array(true); var_dump($arr); echo "<br/>"; print_r($arr); 结果如下: 说明 p ...

  3. 10个带源码的充满活力的Web设计教程

    10个带源码的充满活力的Web设计教程 2013-08-02 16:47 佚名 OSCHINA编译 我要评论(0) 字号:T | T Web设计师必须了解各种各样的Web设计风格,这才能让他或者她在设 ...

  4. scp命令和sftp命令

    scp帮助命令: man scpscp功能:下载远程文件或者目录到本地,如果想上传或者想下载目录,最好的办法是采用tar压缩一下,是最明智的选择.从远程主机下载东西到本地电脑拷贝文件命令 scp us ...

  5. MyEclipse构建Web Service（Xfire框架）

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 任务要求: 使用Xfire实现一个简单的CalculatorWebServ ...

  6. java中关于log日志

    博:http://zhw2527.iteye.com/blog/1006302 http://zhw2527.iteye.com/blog/1099658 在项目开发中,记录错误日志是一个很有必要功能 ...

  7. php传输大数据大文件时候php.ini相关设置

    post_max_size which is directly related to the POST size---针对采用post上传的,大文件,此项为关键 upload_max_filesize ...

  8. FTP-使用记录

    1.磁盘配额不够用 Could not write to transfer socket: ECONNABORTED - 连接中止 452-Maximum disk quota limited to ...

  9. UnitOfWork实战

    企业模式之Unit Of Work模式 在开始UnitOfWork模式之前有必要回顾下我们耳熟能详的Data Access Object(DAO)模式,即数据访问对象.DAO是一种简单的模式,我们构建 ...

  10. 谈谈Session会话和Cookie

    Session Session在我们的网络应用中就是一种客户端与服务器端保持状态的解决方案 Session对象,就是客户端浏览器与服务器之间建立的互动信息状态.每一个不同的用户连接将得到不同的Sess ...