css3属性之一： border-radius
程序员文章站
2022-05-17 22:23:05
...
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
取值：
说明：
- 第一个值是水平半径。
- 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
- 如果任意一个值为0，则这个角是矩形，不会是圆的。
- 值不允许是负值。
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 Backgrounds属性相关介绍
-
css3的@media属性实现页面响应式布局示例代码
-
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
-
基于CSS3 animation动画属性实现轮播图效果
-
CSS3与动画有关的属性transition、animation、transform对比（史上最全版）
-
详解css3 Transition属性（平滑过渡菜单栏案例）
-
浅谈CSS3中display属性的Flex布局的方法
-
详解CSS3中强大的filter(滤镜)属性
-
CSS3 Backgrounds属性相关介绍
-
浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color