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. [Android]Android焦点流程代码分析

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/7286503.html 通过View的View::focusSe ...

  2. Spring+SpringMVC+MyBatis+easyUI整合

    进阶篇 Spring+SpringMVC+MyBatis+easyUI整合进阶篇(一)设计一套好的RESTful API 优化篇 Spring+SpringMVC+MyBatis+easyUI整合优化 ...

  3. 初学Python之 字符串 索引 分片

    字符串是字符的有序集合,可以通过其位置来获得具体的元素. 在python中,字符串中的字符是通过索引来提取的,索引从0开始. python可以取负值,表示从末尾提取,最后一个为-1,倒数第二个为-2, ...

  4. Jdbc模版式写法与Spring-JdbcTemplate的比较

    一.Jdbc模版式写法: [流程] 加载驱动 获取数据库链接 创建Statement对象(用于发送sql语句) 向数据库发送sql语句,获取数据库返回的结果集 从结果集中获取数据 释放资源 上述部分用 ...

  5. Java入门——（6）集合

       关键词:Collection接口.Map接口.Iterator接口.泛型.Collections工具类.Arrays工具类   一.集合概述      当数据多了需要存储,需要容器,而数据的个数 ...

  6. 基于tensorflow的‘端到端’的字符型验证码识别源码整理(github源码分享)

    基于tensorflow的‘端到端’的字符型验证码识别 1   Abstract 验证码(CAPTCHA)的诞生本身是为了自动区分 自然人 和 机器人 的一套公开方法, 但是近几年的人工智能技术的发展 ...

  7. 安卓开发中Spinner控件的使用

    在安卓手机应用开发中,Spinner对象常用方法有以下五种. 用法 1 :以资源方式,静态展示 Spinner 选项 用法 2 :以代码方式,动态展示 Spinner 选项 用法 3 :同时显示图片和 ...

  8. rtems的GNU(GCC)编译环境配置

    // 创建目录 /home/shael/rtems/build   //存放解压包和编译包目录 /home/shael/rtems/archive   //存放源码包目录 /home/shael/rt ...

  9. .net core 2.0学习笔记（四）：迁移.net framework 工程到.net core

    在迁移.net core的过程中,第一步就是要把.net framework 工程的目标框架改为.net core2.0,但是官网却没有提供转换工具,需要我们自己动手完成了..net framewor ...

  10. 简单倒计时js代码

    //倒计时 var timer=null; var interval = 1000; function ShowCountDown(year,month,day,hour,minute,second, ...