语法：

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. kakfa-性能相关

    1.增大partition最大连接数 kafka的集群有多个Broker服务器组成,每个类型的消息被定义为topic,同一topic内部的消息按照一定的key和算法被分区(partition)存储在不 ...

  2. OC高级编程——深入block，如何捕获变量，如何存储在堆上

    OC高级编程——深入block,如何捕获变量,如何存储在堆上   首先先看几道block相关的题目 这是一篇比较长的  博文 ,前部分是block的测试题目,中间是block的语法.特性,block讲 ...

  3. Lintcode--002（两个字符串是变位词）

    写出一个函数 anagram(s, t) 判断两个字符串是否可以通过改变字母的顺序变成一样的字符串. 您在真实的面试中是否遇到过这个题?     样例 给出 s = "abcd", ...

  4. 理想与现实——观电影《Dead Poets Society》有感

    我们每一个人都注定要死去,看看那些旧照片,照片里的年轻人现在都在哪里呢?也许有的人曾经充满活力,曾经信誓旦旦地要去改变这个世界,但如今却变得只知道顺从,如果你去问他们,他们会说:大概这就是现实吧. 现 ...

  5. 戏说WSGI（Python Web服务网关接口）--[转载]

    戏说WSGI(Python Web服务网关接口) 当你在Python的世界中冒险,突然遭遇一只Web怪兽,你会选择什么武器对付它?在兵器谱上,下列兵器可谓名列前茅: Zope,厚重的长枪.较早出现的武 ...

  6. 使用CPU的AVX指令

    arch:AVX 很抱歉GCC还不行……有……倒是 但是不是这么写的 我忘记了……官网上有 http://www.oschina.net/news/66980/kreogist-0-9

  7. CH Round #53 -密室

    描述 有N个密室,3种钥匙(红色,绿色,白色)和2种锁(红色,绿色),红色钥匙只能开红色的锁,绿色钥匙只能开绿色的锁,白色钥匙可以开红色的锁和绿 色的锁,一把钥匙使用一次之后会被扔掉.每个密室由一扇门 ...

  8. cf493C Vasya and Basketball

    C. Vasya and Basketball time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  9. MVC分部试图传参数

      @Html.Partial("_NavMenuPage", new ViewDataDictionary { { "proimshowId",imshowI ...

  10. 负重前行的婚纱线上路 - i天下网商－最具深度的电商知识媒体

    负重前行的婚纱线上路 - i天下网商-最具深度的电商知识媒体 负重前行的婚纱线上路