border-radius的使用方法 border radius 圆形

语法:

border-radius: none | {1,4} [ / {1,4} ]?

相关属性: border-top-right-radius ,border-bottom-right-radius , border-bottom-left-radius ,border-top-left-radius

取值:

由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius:
由浮点数字和单位标识符组成的长度值。不可为负值。

说明:

  1. 第一个值是水平半径。
  2. 如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
  3. 如果任意一个值为0,则这个角是矩形,不会是圆的。
  4. 值不允许是负值。

  radius,就是半径的意思。用这个属性可以很容易做出圆角效果,当然,也可以做出圆形效果。原理很简单,“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。

完整的代码如下:

 1 DOCTYPE html>  2 <</SPAN>html>  3     <</SPAN>head>  4         <</SPAN>meta charset="utf-8">  5         <</SPAN>title>CSS3的border-radius属性</</SPAN>title>  6         <</SPAN>style>  7         .circle { 8             background-color:#f00; 9             width: 600px;   10             height: 600px;11             text-align: center;12                     13             -moz-border-radius: 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        </</SPAN>style>     39     </</SPAN>head>  40     <</SPAN>body> 41         <</SPAN>div> 42            Hello,World!43         </</SPAN>div>  44     </</SPAN>body> 45 </</SPAN>html> 

运行效果截图(Chrome):

接下来用这个属性做一个奥运五环,与前面不同的是,圆环是有边的厚度的,这里用的是相对单位em。代码如下:

  1 DOCTYPE html> 
2 <</SPAN>html>
3 <</SPAN>head>
4 <</SPAN>meta charset="UTF-8" />
5 <</SPAN>title>The Olympic Flag</</SPAN>title>
6 <</SPAN>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;
border-radius的使用方法 border radius 圆形
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 </</SPAN>style>
90 </</SPAN>head>
91 <</SPAN>body>
92 <</SPAN>ul>
93 <</SPAN>li></</SPAN>li>
94 <</SPAN>li></</SPAN>li>
95 <</SPAN>li></</SPAN>li>
96 <</SPAN>li></</SPAN>li>
97 <</SPAN>li></</SPAN>li>
98 <</SPAN>li></</SPAN>li>
99 <</SPAN>li></</SPAN>li>
100 <</SPAN>li></</SPAN>li>
101 <</SPAN>li></</SPAN>li>
102 </</SPAN>ul>
103 </</SPAN>body>
104 </</SPAN>html>

运行效果截图(Chrome):

  

爱华网本文地址 » http://www.413yy.cn/a/25101017/335969.html

更多阅读

卷发器怎么用?图解卷发器的使用方法 卷发器的使用方法图解

卷发器怎么用?图解卷发器的使用方法——简介很多MM都有卷发情结,漂亮的卷发成了众多爱美女士的追求,对于爱美的MM们来说,卷发器已经成为了可以自己动手打造百变造型的重要家电产品。不用去发廊就可以自己做出漂亮的卷发,下面就跟随小编一

消防栓的使用方法 消火栓的正确使用方法

消防栓的使用方法——简介消防栓是安装在消防给水管网上的,主要供消防队灭火使用。分地上、地下两种。地上消防栓适于气温较高的地方,其供水接口装在高于路面的垂直筒体上。地下消防栓和地下消防栓构造大致相似,主要由弯管、阀体、阀座

MFC中进度条控件的使用方法 mfc进度条控件使用

MFC中进度条控件的使用方法——简介进度条控件是程序开发中基础控件之一,常用于显示程序的进度。在进行程序安装、文件传输时经常用到。其用法也比较简单固定。今天就和大家分享一下其简单的使用方法吧。^_^MFC中进度条控件的使用方

加湿器的使用方法 加湿器正确使用方法

现如今空气质量越来越差,冬季的空气越来越干燥,尤其是北方。再加之冬天使用现如今使用加湿器的用户越来越多,尤其是冬天家里面开了空调,那更是需要空气加湿器了。加湿器的使用方法——【使用方法】◆换水时务必先关掉电源; ◆为确保并延

WIN7系统附带的写字板软件的使用方法 w2013xp系统写字板

WIN7系统附带的写字板软件的使用方法——简介 WIN7系统自带的写字板是一个功能强大的文字处理程序,用户可以利用它进行日常工作中文件的编辑。还可以图文混排,插入图片、声音、视频剪辑等多媒体资料。如果我们的电脑中还没有安装micro

声明:《border-radius的使用方法 border radius 圆形》为网友北方爱人分享!如侵犯到您的合法权益请联系我们删除