CSS3属性之一：border-radius

语法：

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）：

border-radius 圆角半径的更多相关文章

  1. ImageView的圆角半径

    // 设置imageview的圆角半径 UIImageView *imageView = (UIImageView *)[cell viewWithTag:tag]; imageView.layer. ...

  2. WPF 采用Border创建圆角

    通过设置可以创建圆角border的CornerRadius属性其边框呈现圆角样式 代码: <Border Height="50" Background="Red&q ...

  3. 使用ToggleButton和StackPanel+Border实现圆角开关按钮动画效果

    <ToggleButton Height=" HorizontalAlignment="Left" Margin="138,122,0,0" N ...

  4. iOS 高效添加圆角效果实战讲解

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  5. iOS开发-添加圆角效果高效实现

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  6. android 自定义控件——（一）圆角按钮

    ----------------------------------矩形或圆角类型(源代码下有属性解释)------------------------------------------------ ...

  7. Cocos2d-x绘制圆角矩形

    /* * @brief 画圆角矩形 * @param origin 矩形开始点 * @param destination 矩形结束点 * @param radius 圆角半径 * @param seg ...

  8. php给图片添加圆角并且保持透明,可做圆形头像

      原文链接:https://www.zhaokeli.com/article/8031.html 给图片添加圆角, 用到的主要的(判断一个点是否在圆内)的公式在上面所说的生成圆形图片文章中. 然后扫 ...

  9. winform GDI基础（二）画带圆角的矩形框

    private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; g.SmoothingMode ...

随机推荐

  1. VS2010 水晶报表的使用

    在VS2010中新建一个“Windows 窗体应用程序”项目,在该项目中添加一个水晶报表“CrystalReport1.rpt”,然后在项目上点击鼠标右键属性,将“目标框架”改为“.Net Frame ...

  2. SQLite密码添加移除

    背景:电脑清理--个人洁癖 SQLite的最原始的是没有加密的,从而衍生了多种加密算法,但在平常使用中使用System.Data.Sqlite,但其加密后,一般都需要要单独的sqlite管理器--像我 ...

  3. MySQL数据库自带备份与恢复工具:MySQLdump.exe与mysql.exe

    数据库的备份工作是保护数据库正常运行的关键,以下的文章主要讲述的是MySQL数据库备份的一些小妙招,我们大家都知道使用MySQL dump备份数据库的用户所需要的权限相对而言还是比较小的,只需要sel ...

  4. C# RFID windows 服务 串口方式

    话说RFID以前很火所以整理一下一年前自己处理的RFID程序,放源码. 一开始觉得他是个很神奇的东西. 包含串口通讯和网络通讯. 由于网络通讯设备太贵,所以国内的设备基本上都是在外置一个比较便宜的模块 ...

  5. linux下SVN忽略文件/文件夹的方法

    linux下SVN忽略文件/文件夹的方法 假设想忽略文件temp 1. cd到temp所在的目录下: 2. svn propedit svn:ignore . 注意:请别漏掉最后的点(.表示当前目录) ...

  6. C#复习、面向对象阶段开始

    C#复习:在控制台程序中使用结构体.集合,完成下列要求项目要求:一.连续输入5个学生的信息,每个学生都有以下4个内容:1.序号 - 根据输入的顺序自动生成,不需要手动填写,如输入第一个学生的序号是1, ...

  7. phpexecel 导入导出,格式

    1.日期时间合并到c中 =a1 &b1 或 =a1 + b1 这些都是运算符 2.此时c1的值是这条公式,而并不是公式运算的结果 复制c,粘贴到d,选择粘贴值 3.此时c是时间日期格式的,如需 ...

  8. Android自动化压力测试之Monkey Test （三）

    Monkey 是什么? Monkey是Google提供的一个用于稳定性与压力测试的命令行工具. Monkey路径: 路径:/System/framework/monkey.jar 启动脚本路径:/sy ...

  9. 查看mysql的安装信息

    查看mysql的安装信息: #ps -ef | grep mysql usr/bin/mysql 是指:mysql的运行路径 var/lib/mysql 是指:mysql数据库文件的存放路径 usr/ ...

  10. HTTP基础05--http首部

    HTTP 报文首部 HTTP 请求报文 在请求中,HTTP 报文由方法.URI.HTTP 版本.HTTP 首部字段等部分构成. HTTP 响应报文 在响应中,HTTP 报文由 HTTP 版本.状态码( ...