语法：

border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?

相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

取值：

<length>：
由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius：
由浮点数字和单位标识符组成的长度值。不可为负值。 

说明：

  1. 第一个值是水平半径。
  2. 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
  3. 如果任意一个值为0，则这个角是矩形，不会是圆的。
  4. 值不允许是负值。

　　radius，就是半径的意思。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。

完整的代码如下：

 1 <!DOCTYPE html> 
 2 <html> 
 3     <head> 
 4         <meta charset="utf-8"> 
 5         <title>CSS3的border-radius属性</title> 
 6         <style> 
 7         .circle {
 8             background-color:#f00;
 9             width: 600px; /* div的宽和高为600px即正方形的边长为600px */
10             height: 600px;
11             text-align: center;
12                     
13             -moz-border-radius: 300px; /* 圆的半径为边长的一半，即300px */
14             -webkit-border-radius: 300px;
15             border-radius: 300px;
16      
17             display: -moz-box;
18             display: -webkit-box;
19             display: box;
20      
21             -moz-box-orient: horizontal; 
22             -webkit-box-orient: horizontal;
23             box-orient: horizontal;
24      
25             -moz-box-pack: center;
26             -moz-box-align: center;
27      
28             -webkit-box-pack: center;
29             -webkit-box-align: center;
30      
31             box-pack: center;
32             box-align: center; 
33             
34             font:normal 80px/100% Arial;
35             text-shadow:1px 1px 1px #000;
36             color:#fff;
37  }
38  </style>     
39     </head>  
40     <body> 
41         <div class="circle"> 
42            Hello,World!
43         </div>  
44     </body> 
45 </html>

运行效果截图（Chrome）：

接下来用这个属性做一个奥运五环，与前面不同的是，圆环是有边的厚度的，这里用的是相对单位em。代码如下：

  1 <!DOCTYPE html> 
  2 <html> 
  3     <head> 
  4         <meta charset="UTF-8" /> 
  5         <title>The Olympic Flag</title>  
  6         <style type="text/css" media="screen"> 
  7         body {
  8             margin:20px;
  9             background-color:#efefef;
 10  }
 11         ul.flag {
 12             list-style-type:none;
 13             position: relative;
 14             margin: 20px auto;
 15  } 
 16       
 17         .flag li, .flag li:before, .flag li:after {
 18             -webkit-border-radius: 6em;
 19             -moz-border-radius: 6em;
 20             border-radius: 6em;
 21             position: absolute;
 22  }
 23         
 24         .flag li {
 25             width: 12em;
 26             height: 12em;
 27             left: 0;
 28             top: 0;
 29             font-size: 1em;
 30  }  
 31       
 32         .flag li:after {
 33             display: block;
 34             content: "";
 35             top: -0.1em;
 36             left: -0.1em;
 37             right: -0.1em;
 38             bottom: -0.1em;
 39             border: solid 1.4em black;
 40  }
 41         
 42         .flag .blue   { z-index: 10; left: 0; top: 0; }
 43         .flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em; }
 44         .flag .black  { z-index: 21; left: 13.6em; top: 0; }
 45         .flag .green  { z-index: 20; left: 20.4em; top: 5.7em; }
 46         .flag .red    { z-index: 10; left: 27.2em; top: 0px; }   
 47         
 48         .flag .blue:after   { border-color: blue; }   
 49         .flag .yellow:after { border-color: yellow; } 
 50         .flag .black:after  { border-color: black; }
 51         .flag .green:after  { border-color: green; } 
 52         .flag .red:after    { border-color: red; }
 53  /* 蓝色压住黄色 */  
 54         .flag .blue.alt { z-index: 24; }
 55         .flag .blue.alt, 
 56         .flag .blue.alt:before, 
 57         .flag .blue.alt:after {
 58             border-top-color: transparent;
 59             border-left-color: transparent;
 60             border-bottom-color: transparent;
 61  }
 62  /* 黄色压住黑色 */
 63         .flag .yellow.alt { z-index: 23; }
 64         .flag .yellow.alt, 
 65         .flag .yellow.alt:before, 
 66         .flag .yellow.alt:after {
 67             border-right-color: transparent;
 68             border-left-color: transparent;
 69             border-bottom-color: transparent;
 70  }    
 71  /* 绿色压住黑色  */
 72         .flag .green.alt { z-index: 23; }
 73         .flag .green.alt,
 74         .flag .green.alt:before,
 75         .flag .green.alt:after {
 76             border-top-color: transparent;
 77             border-right-color: transparent;
 78             border-bottom-color: transparent;
 79  }
 80  /* 红色压住绿色  */
 81         .flag .red.alt { z-index: 23; }
 82         .flag .red.alt, 
 83         .flag .red.alt:before,
 84         .flag .red.alt:after {
 85             border-top-color: transparent;
 86             border-right-color: transparent;
 87             border-left-color: transparent;
 88  }       
 89  </style>   
 90     </head> 
 91     <body> 
 92         <ul class="flag"> 
 93             <li class="blue"></li> 
 94             <li class="blue alt"></li> 
 95             <li class="yellow"></li> 
 96             <li class="yellow alt"></li> 
 97             <li class="black"></li> 
 98             <li class="green"></li> 
 99             <li class="green alt"></li> 
100             <li class="red"></li> 
101             <li class="red alt"></li> 
102         </ul>  
103     </body> 
104 </html>                                                                     

运行效果截图（Chrome）：

CSS3属性之一：border-radius的更多相关文章

  1. CSS3：不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  2. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

  3. 如何处理CSS3属性前缀（转载）总结

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  4. CSS3属性border-radius绘制多种多样的图形

    border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...

  5. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  6. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  7. 让IE6IE7IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  8. document.documentElement.style判断浏览器是否支持Css3属性

    1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAn ...

  9. css3属性中background-clip与background-origin的用法释疑

    困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border.padding.content 三种 ...

  10. css3属性兼容性

    来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...

随机推荐

  1. C语言初学 判断闰年的问题

    #include<stdio.h> main( ) {  int   year , leap; scanf("%d",&year);             i ...

  2. AFNetworking 使用总结 （用法+JSON解析）

    « AFNetworking 图片的本地缓存问题 Get application bundle seed ID in iOS » AFNetworking 使用总结 (用法+JSON解析)    Fr ...

  3. objc runtime 动态增加属性

    objective-c中,有类别可以在不修改源码的基础上增加方法:近排在看别人的开源代码时,发现还可以动态增加属性.而且是在运行时,太牛B了. 使用运行时库,必须要先引入 objc/runtime.h ...

  4. gcd - b- 201611302317

    谈到iOS多线程,一般都会谈到四种方式:pthread.NSThread.GCD和NSOperation.其中,苹果推荐也是我们最经常使用的无疑是GCD.对于身为开发者的我们来说,并发一直都很棘手,如 ...

  5. WCF-基本知识

    WCF-基本知识 (1)WCF服务元数据交换方式介绍: WCF服务有两种方案可以发布自己的元数据.一种是基于HTTP-GET协议提供元数据:另一种则为MEX终结点元数据交换方式,和WCF服务一样使用一 ...

  6. Codeforces 538E Demiurges Play Again（博弈DP)

    http://codeforces.com/problemset/problem/538/E 题目大意: 给出一棵树,叶子节点上都有一个值,从1-m.有两个人交替从根选择道路,先手希望到达的叶子节点尽 ...

  7. js深入研究之神奇的匿名函数类生成方式

    <script type="text/javascript"> var Book = (function() { // 私有静态属性 ; // 私有静态方法 funct ...

  8. jQuery 1.6+ 中attr()与prop() 区别

    最近在写一个关于checkbox全选与取消全选的优化方法时,看到很多高手用到了.prop(). 于是在jquery的帮助文档查了一下,才知道这是在jquery 1.6.1中新加的方法,用来设置属性.但 ...

  9. python部落刷题宝学到的内置函数

    最近加入了python部落,感觉里面的刷题宝很有意思,玩了一下,知道了许多以前并不清楚的内置函数,然后感觉到快要记不住了,所以开始陈列一下 1.divmod(a,b):取a除以b的商和余数,功效等价于 ...

  10. php字符串常用处理函数（数组的拆分、查找替换）

    //字符串常用函数    $a = "hello";    echo strlen($a); //输出字符串的长度        $b = "Hello";   ...