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. VerilogHDL可综合设计的注意事项

    可综合的语法已经记录得差不多了,剩下一些遗留的问题,在这里记录一下吧. 一.逻辑设计 (1)组合逻辑设计 下面是一些用Verilog进行组合逻辑设计时的一些注意事项: ①组合逻辑可以得到两种常用的RT ...

  2. node调用phantomjs-node爬取复杂页面

    什么是phantomjs phantomjs官网是这么说的,'整站测试,屏幕捕获,自动翻页,网络监控',目前比较流行用来爬取复杂的,难以通过api或正则匹配的页面,比如页面是通过异步加载.phanto ...

  3. 分享 android 源码

    Android精选源码 UI框架 QSkinLoader换肤框架 一款优雅的中国风Android笔记源码 ListView.RecyclerView两种方式实现聊天界面 android仿滴滴时间选择控 ...

  4. [补档][HNOI 2008]GT考试

    [HNOI 2008]GT考试 题目 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字. 他的不吉利数学A1A2... ...

  5. Go的类型断言解析

    经常地我们对一个接口值的动态类型是不确定的,如方法的形参为接口类型时,此时就需要检验它是否符合我们需要的类型.类型断言是一个使用在接口值上的操作.断言类型的语法:x.(T),这里x表示一个接口的类型, ...

  6. HTML——CSS的基础语法1

    页面中所有CSS代码,需要写入到<style></style>标签中. style标签的type属性应该选择text/css,但是type属性可以省略. 1.CSS常用选择器 ...

  7. angular学习（七）-- Service

    1.7 服务:Service 如果做过后台开发,那么对 Angular 中的服务就好理解多了. 在 Angular 中,服务的概念和后台的服务概念基本是一样的,差别只是在于技术细节. 服务是对公共代码 ...

  8. 怎样做才是最优雅方式切换 web 项目数据源 ？

    随着业务变迁/需求变更,JavaEE 应用中会被迫连接多个数据源进行业务处理. 怎样在不影响原有项目结构的情况下,已最优雅/最简洁的方式动态切换数据源呢? 本文已一次添加数据源后动态切换实践为例,描述 ...

  9. shell编程之文件包含

    shell脚本也可以包含文件 格式: . filename 或者source filename 举例: a.sh #!/bin/sh calla() { echo "a.sh is call ...

  10. 理解LGWR,Log File Sync Waits以及Commit的性能问题[转]

    理解LGWR,Log File Sync Waits以及Commit的性能问题 一．概要: 1.  Commit和log filesync的工作机制 2.  为什么log file wait太久 3. ...