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. PMP 第十章 项目沟通管理

    1识别干系人 2规划沟通 3发布信息 4管理干系人期望 5报告绩效 1.沟通的维度有哪些?沟通技巧有哪些? 2.规划沟通管理的目的是什么?沟通渠道的计算(重点).影响沟通技术的因素有哪些?沟通模型的步 ...

  2. 使用canvas实现擦玻璃效果---转载

    <!DOCTYPE html> <html> <head lang="zh"> <meta name="viewport&quo ...

  3. 智能车学习(十五)——K60野火2013版例程

    一.中断函数注册方法: 1.格式: 配置某个功能的中断 注册中断函数 开启中断 2.一个例子 pit_init_ms(PIT0,);//定时中断初始化 set_vector_handler(PIT0_ ...

  4. IIS：连接数、并发连接数

    IIS:连接数.并发连接数.最大并发工作线程数.应用程序池的队列长度.应用程序池的最大工作进程数详解 iis性能指标的各种概念:连接数.并发连接数.最大并发工作线程数.应用程序池的队列长度.应用程序池 ...

  5. C# break continue return

    break:跳出当前循环,执行循环后的代码 continue:跳出当前循环,执行下一次循环 return:跳出整个方法

  6. TeeChart Pro 5.0

    这是Delphi7自带例子 C:\Program Files\Borland\Delphi7\Demos\TeeChart 以下为翻译的文字,有部分不准确. TeeChart Pro 5.0是一个库 ...

  7. JS(event事件)

    常用的event事件: 属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事 ...

  8. [bzoj1071]组队[单调指针乱搞]

    这道题也很感人,主要改了比较久的时间... bzoj第一页的题,居然只过了五百多个人,(我是第512,orzliyicheng是513) 代码不长,但是细节搞了很久,主要sort写错了,晕... 首先 ...

  9. Eclipse Che：下一代基于 Web 的 IDE

    即使对于熟练的开发人员,想要去为一个项目贡献代码,正确的安装和配置一个集成开发环境.工作区 workspace和构建工具,都是一个十分艰难和浪费时间的任务.Codenvy 的CEO,Tyler Jew ...

  10. OpenCV（5） 对比度和亮度

      公式: 两个参数 \alpha > 0 和 \beta 一般称作 增益 和 偏置 参数.我们往往用这两个参数来分别控制 对比度 和 亮度 .   #include "stdafx. ...