语法：

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. 命令提示符CMD远程连接Mysql学习笔记

    我想要用Cmd可以像SecureCRT一样远程连接数据库,查询数据,因为用cmd的话可以用批处理,方便脚本调用 第一步:直接使用命令 mysql –h ip –u user –p,本地运行了该命令提示 ...

  2. Java学习笔记--“==”与"equals"

    java中的数据类型,可分为两类: 1. 基本数据类型,也称原始数据类型.byte,short,char,int,long,float,double,boolean 他们之间的比较,应用双等号(==) ...

  3. 不可小觑的Web开发编码规范

    http://www.csdn.net/article/2013-10-21/2817235-coding-conventions-in-web-development 摘要:编码规范是一套规章制度, ...

  4. 这样就算会了PHP么？-5

    汇集一点关于数据深入一些的几个函数,去重,弹出,加入,查找.... <?php $str = "时装,休闲,职业装"; $strs = explode(",&quo ...

  5. 关于API的设计和需求抽象

    一,先来谈抽象吧,因为抽象跟后面的API的设计是息息相关的 有句话说的好(不知道谁说的了):计算机科学中的任何问题都可以抽象出一个中间层就解决了. 抽象是指在思维中对同类事物去除其现象的.次要的方面, ...

  6. translate函数说明

    TRANSLATE(expr, from_string, to_string) from_string 与 to_string 以字符为单位,对应字符一一替换. SQL> SELECT TRAN ...

  7. spring framework 4 源码阅读(2)---从ClassPathXmlApplicationContext开始

    Application初始化日志 15:23:12.790 [main] DEBUG o.s.core.env.StandardEnvironment - Adding [systemProperti ...

  8. 【转】如何过滤 adb logcat 输出

    原文网址:http://www.cnblogs.com/imouto/archive/2012/12/11/filtering-adb-logcat-output.html 简介: 本文介绍如何在 s ...

  9. 解决Jenkins上git出现的“ERROR: Error fetching remote repo 'origin'”问题

    今天对清掉了Jenkins中项目的工作空间,结果构建出现“ERROR: Error fetching remote repo 'origin'”问题:网上各种找也没找到解决这个问题的方法. 后来看错误 ...

  10. poj 2229 Ultra-QuickSort(树状数组求逆序数)

    题目链接:http://poj.org/problem?id=2299 题目大意:给定n个数,要求这些数构成的逆序对的个数. 可以采用归并排序,也可以使用树状数组 可以把数一个个插入到树状数组中, 每 ...