border-radius: none　｜　length{1,4} / length{1,4} 
其中每一个值可以为 数值或百分比的形式。 
length/length　第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。 
如果是一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。 
如果是两个值，那么 top-left和bottom-right相等，为第一个值，top-right和bottom-left值相等，为第二个值。 
 
如果是三个值，那么第一个值是设置top-left，而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。 
 
如果是四个值，那么第一个值是设置 top-left， 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left 

除了上述的简写外，还可以和border一样，分别写四个角，如下： 
border-top-left-radius: //左上角 
border-top-right-radius: //右上角 
border-bottom-right-radius: //右下角 
border-bottom-left-radius: //左下角 
分别是水平方向和竖直方向半径，第二值省略的情况下，水平方向和竖直方向的半径相等。 
border-radius 只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式，对于老版的浏览器，border-radius 需要根据不同的浏览器内核添加不同的前缀，比说 Mozilla 内核需要加上“-moz”，而 Webkit 内核需要加上“-webkit”等，但是IE和Opera没有私有格式，因此为了最大程度的兼容浏览器，我们需要设置如下： 
-webkit-border-radius: 10px 20px 30px; 
-moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px; 
请将标准形式写在浏览器私有形式之后。

举几个例子看一下效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="Keywords" content="关键词一，关键词二">

    <meta name="Description" content="网站描述内容">

    <meta name="Author" content="刘艳">

    <title></title>

    <style>

        img{border-radius: 30px;margin: 100px;}

    </style>

</head>

<body>

    <img src="../images/photo.jpg" width="300px">

</body>

</html>

效果： 
 
四个角的半径都是30px;

再看一个标准的圆以及椭圆：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="Keywords" content="关键词一，关键词二">

    <meta name="Description" content="网站描述内容">

    <meta name="Author" content="刘艳">

    <title></title>

    <style>

        div{display: inline-block; border: 10px solid red;}

        .circle{width: 50px; height: 50px;

            -webkit-border-radius:50%;-moz-border-radius:50%;border-radius: 50%;}

        .elipse{width: 50px; height: 100px;

            -webkit-border-radius:50%;-moz-border-radius:50%;border-radius: 50%;}

    </style>

</head>

<body>

    <div class="circle"></div>

    <div class="elipse"></div>

</body>

</html>

效果： 
 
第一个和第二个div的差别主要在于其是正方形还是长方形，圆圈在轮播时，可以替代圆圈的图片使用。

以上都是水平方向和竖直方向半径相等的例子，下面举两个水平方向和竖直方向半径不相同的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="Keywords" content="关键词一，关键词二">

    <meta name="Description" content="网站描述内容">

    <meta name="Author" content="刘艳">

    <title></title>

    <style>

        div{display: inline-block; border: 10px solid red;margin: 100px;}

        .div1{width: 200px; height: 100px;border-radius: 0px 50px 32px/28px 50px 70px;}

        .div2{width:100px; height: 200px; border-radius: 26px 106px 162px 32px/28px 80px 178px 26px;}

        .div3{width:100px;height: 200px; border-radius: 20px 50px/ 20px 50px;}

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="div2"></div>

    <div class="div3"></div>

</body>

</html>

效果如下所示： 

border-radius值的解析的更多相关文章

  1. SQL查询多条不重复记录值简要解析【转载】

    转载http://hi.baidu.com/my_favourate/item/3716b0cbe125f312505058eb SQL查询多条不重复记录值简要解析2008-02-28 11:36 以 ...

  2. 关于用python作为第三方程序，来调用shell命令的问题，以及返回值格式解析

    1.用python语言作为第三方,调用shell 在python2.x中,可以通过包commands来进行调用shell命令.如下: cmd就是你要调用的shell命令,把环境配置好,输入正确的命令格 ...

  3. 接口API测试和返回值JSON解析的插件

    火狐插件1.   HttpRequest作用:接口API测试例子:http://192.168.10.61:8080/ZHCS/user/loginApp.do?phone=admin&pwd ...

  4. JAVA finally字句的异常丢失和返回值覆盖解析

    转载:http://blog.csdn.net/sureyonder/article/details/5560538 Java虚拟机在每个try语句块和与其相关的catch子句的结尾 处都会“调用”f ...

  5. C语言数据类型取值范围解析

    版权声明:本文为博主原创文章,未经博主允许不得转载.   为什么int类型的取值范围会是-2^31 ~ 2^31-1  ,为什么要减一呢? 计算机里规定,8位二进制为一个字节,拿byte来说,一个BY ...

  6. Java异常处理场景中不同位置的返回值详细解析

    Java 异常处理中的返回值在不同位置不同场景下是有一些差别的,这里需要格外注意 具体分以下两种场景: 1 finally语句块没有return语句,即当代码执行到try或者catch语句块中的ret ...

  7. Jquery的text()和html()方法在li与div取值结果解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. python 求值表达式解析

    采用中缀转后缀的算法. 注意我输入的格式. #注意格式 def suffix(st): listopt=[" "] listnum=[" "] for i in ...

  9. ndoejs后台查询数据库返回的值-进行解析

    JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符串

随机推荐

  1. Docker网络——单host网络

    前言 前面总结了Docker基础以及Docker存储相关知识,今天来总结一下Docker单主机网络的相关知识.毋庸置疑,网络绝对是任何系统的核心,他在Docker中也占有重要的作用.同样本文基于Clo ...

  2. 如何将R包安装到自定义路径

    参考  设置环境变量R_LIBS将R包安装到自定义路径   实际上是可以解决问题的, #环境变量完成以后,启动(重启)R,运行 .libPaths() 加载R包时,发现路径仍然未变成自定义的. 那么参 ...

  3. 基于ubuntu14视觉识别乒乓球_1

    串口通信,opencv3.0 窗口大小可调 编译 cmake ../ make ./color 正常光线下运行比较稳定,找圆比较准确.程序设置了圆的半径区间以及圆心最小间距,以满足产品的需求,可自行修 ...

  4. Jmeter==HTTP信息头管理器的作用

    HTTP信息头管理器在Jmeter的使用过程中起着很重要的作用,通常我们在通过Jmeter向服务器发送http请求(get或者post)的时候,往往后端需要一些验证信息,比如说web服务器需要带过去c ...

  5. Linux操作系统-命令-free

    在看过网友写的一篇名为<Buffer和Cache的区别>http://zhumeng8337797.blog.163.com/blog/static/1007689142011102447 ...

  6. HDU 5543 Pick The Sticks：01背包变种

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5543 题意: 给你N个金条和一张长度为L的桌子.每个金条长度为a[i],价值为w[i].金条只能在桌子 ...

  7. HDU 4372 Count the Buildings：第一类Stirling数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4372 题意: 有n栋高楼横着排成一排,各自的高度为1到n的一个排列. 从左边看可以看到f栋楼,从右边看 ...

  8. log4j配置文件，用时导入jar包buildPAthena、

    log4j.rootLogger=debug,CONSOLE,file#log4j.rootLogger=ERROR,ROLLING_FILElog4j.logger.cn.smbms=debuglo ...

  9. 地图性能测试利器PerfQA Analyzer

    PerfQA Analyzer作为一个地图性能测试工具,能针对ArcGIS 技术堆栈的系统进行性能问题的排查,用于系统试运行阶段的压力测试以及在线系统运维.大大减轻了GIS系统管理员的性能调优工作压力 ...

  10. 如何修改ionic Popup的样式

    第一次用ionic的Popup时感觉很好用,但是太丑了.但是又不会修改自定义的样式,只能自己写了个模态框.后来仔细搜索了一下.发现还是可以修改的. var confirmPopup = $ionicP ...