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. JVM学习笔记三：垃圾收集器及内存管理策略

    垃圾收集器 上文说到了垃圾收集算法,这次我们聊一下HotSpot的具体垃圾收集器的实现,以JDK1.7为例,其包含的可选垃圾收集器如下图: 不同收集器之间的连线,代表它们可以搭配使用,收集器所属的区域 ...

  2. Python优缺点

    优点 简单----Python是一种代表简单主义思想的语言.阅读一个良好的Python程序就感觉像是在读英语一样,尽管这个英语的要求非常严格!Python的这种伪代码本质是它最大的优点之一.它使你能够 ...

  3. Spring+SpringMVC+MyBatis+easyUI整合进阶篇(二)RESTful API实战笔记(接口设计及Java后端实现)

    写在前面的话 原计划这部分代码的更新也是上传到ssm-demo仓库中,因为如下原因并没有这么做: 有些使用了该项目的朋友建议重新创建一个仓库,因为原来仓库中的项目太多,结构多少有些乱糟糟的. 而且这次 ...

  4. 轻松学JVM（一）——基本原理

    前言 JVM一直是java知识里面进阶阶段的重要部分,如果希望在java领域研究的更深入,则jvm则是如论如何也避开不了的话题,本系列试图通过简洁易读的方式,讲解jvm必要的知识点. 运行流程 我们都 ...

  5. 微信开发获取用户OpenID

    第一次开发微信版网页,对最重要的获取微信OpenId,特此记录下来 1.首先得有appid和appsecret . public class WeiXin { public static string ...

  6. AKOJ -- 1529 -- 寻找最大数

    1529: 寻找最大数 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 107  Solved: 53 上一题SubmitStatus标签打分编辑题目信 ...

  7. 基于.NET CORE微服务框架 -Api网关服务管理

    1.前言 经过10多天的努力,surging 网关已经有了大致的雏形,后面还会持续更新完善,请大家持续关注研发的动态 最近也更新了surging新的版本 更新内容: 1. 扩展Zookeeper封装2 ...

  8. Java初学者：深度辨析"=="与equals的区别

    Java初学者:深度辨析"=="与equals()方法的区别 1.基本数据类型当中,"=="比较的是两个变量的值 int a=5; int b=4; 3 int ...

  9. 云端TensorFlow读取数据IO的高效方式

    低效的IO方式 最近通过观察PAI平台上TensoFlow用户的运行情况,发现大家在数据IO这方面还是有比较大的困惑,主要是因为很多同学没有很好的理解本地执行TensorFlow代码和分布式云端执行T ...

  10. XAMPP启动MySQL时报端口被占用错误

    1 问题描述 启动XAMPP中的mysql时宝凑,错误信息是:3306端口被占用 2 问题诊断 2.1 可能是在安装XAMPP之前安装了MySQL,这样电脑中就有两个MySQL啦,如果我们在安装时都采 ...