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. Java中的24种设计模式与7大原则 （转）

    一.创建型模式 1.抽象工厂模式(Abstract factory pattern): 提供一个接口, 用于创建相关或依赖对象的家族, 而不需要指定具体类.2.生成器模式(Builder patter ...

  2. 11.2.0.4 RAC 手动打补丁

    1. 下载补丁和最新OPatchGI PSU : p25869727_112040_Linux-x86-64.zipOPatch : p6880880_112000_Linux-x86-64.zip ...

  3. An internal error occurred during: "Launching web on MyEclipse Tomcat"

    An internal error occurred during: "Launching web on MyEclipse Tomcat" 解决办法1 1.首先关闭MyEclip ...

  4. 42. leetcode 70. Climbing Stairs

    70. Climbing Stairs You are climbing a stair case. It takes n steps to reach to the top. Each time y ...

  5. Python爬虫从入门到放弃（二十一）之 Scrapy分布式部署

    按照上一篇文章中我们将代码放到远程主机是通过拷贝或者git的方式,但是如果考虑到我们又多台远程主机的情况,这种方式就比较麻烦,那有没有好用的方法呢?这里其实可以通过scrapyd,下面是这个scrap ...

  6. 安徽省2016“京胜杯”程序设计大赛_I_恶魔A+B

    恶魔A+B Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 73 Accepted: 17 Description 相信大家 ...

  7. 【HOSTS相关】前端提供测试模板地址

    在测试接口的时候,首先需要绑定HOSTS,这个文件的位置在这个目录的下面:C:\WINDOWS\system32\drivers\etc,打开hosts文件的方式选择"记事本"就可 ...

  8. Dinic算法详解及实现

    预备知识: 残留网络:设有容量网络G(V,E)及其上的网络流f,G关于f的残留网络即为G(V',E'),其中G'的顶点集V'和G的顶点集V相同,即V'=V,对于G中任何一条弧<u,v>,如 ...

  9. Matlab学习笔记（1）

    在帮助文档中查看学习视频的时候.出现以下对话框,不能查看 解决办法:   在系统环境变量中找到Path.添加“%SystemRoot%\system32;%SystemRoot%;%SystemRoo ...

  10. WTL--SDI框架分析

    创建SDI产生的基本类:CMainFrame,CAboutDlg和CWTLView(WTL为项目名). 由此可见,不同于MFC,WTL少了文档类,它的结构就只有简单的窗口类和视图类,而至于串行化(MF ...