`

css3属性之一: border-radius

阅读更多

 

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失效问题

    在CSS世界中,`border-radius`属性是一个非常重要的特性,它允许我们为元素添加圆角效果,从而使得设计更加精致和现代。然而,在实际开发中,我们可能会遇到`border-radius`失效的问题,导致元素的边角无法按照预期...

    css3(border-radius)边框圆角详解

    CSS3 中的 border-radius 属性可以生成圆角边框,无需使用图片背景图案,从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...

    让IE6也识别CSS3-圆角效果应用border-radius

    `border-radius`属性是CSS3中的一项重要特性,它允许开发者为元素的边框添加圆角,无需再依赖图像来实现这一效果。在现代浏览器中,如Chrome、Firefox、Safari、Opera以及更新版本的IE,`border-radius`的兼容性已经...

    圆角魅力:CSS border-radius全攻略

    `border-radius`属性自CSS3版本引入以来,便迅速成为了设计师和开发者的宠儿。该属性主要用来创建具有圆角效果的边框,通过设置一个或多个角的半径值,可以轻松地调整元素的形状,从传统的方形到各种圆角甚至完全...

    CSS3中border-radius、box-shadow与gradient那点事儿

    在CSS3中,border-radius、box-shadow和gradient是三个非常重要的样式属性,它们极大地提升了网页设计的美观性和表现力。让我们逐一深入探讨这三个概念。 首先,`border-radius`属性允许我们为元素的边框添加圆角,...

    border-radius兼容ie78

    在CSS3中,`border-radius`属性是一个非常重要的特性,它允许我们为元素的边框添加圆角,使得设计更加丰富和美观。然而,这个特性在早期版本的Internet Explorer(尤其是IE7和IE8)中并不支持。为了解决这个问题,...

    CSS3中border-radius属性设定圆角的使用技巧

    border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。 CSS ...

    引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果

    为了解决这个问题,开发者们发明了一种名为PIE ( Positioned Inline Element ) 的技术,它通过一个名为`.htc`(HTML Component)的文件来模拟实现CSS3的某些效果,其中包括`border-radius`。 PIE.htc 是Progressive...

    IE实现CSS3中的border-radius(圆角)

    让IE实现CSS3中的border-radius(圆角)

    border-radius失效

    在CSS世界中,`border-radius`属性用于为元素添加圆角效果,使边框不再呈现为直角,而是呈现出各种半径的弧形。然而,有时候我们可能会遇到`border-radius`失效的问题,导致元素的边角无法按照预期显示为圆形或椭圆...

    border-radius.htc

    "border-radius.htc"是一个历史悠久的解决方案,它用于解决IE9及以下版本对CSS圆角属性不支持的问题。这个HTC(HTML Components)文件实际上是微软在Internet Explorer中引入的一种技术,允许开发者通过JavaScript和...

    css3教程应用css3 圆角border-radius属性制作...

    在CSS3中,`border-radius`属性是一个非常重要的特性,它允许我们为元素的边框创建圆角效果,使得设计更加美观和现代化。这个特性在网页设计中被广泛应用,可以替代传统的图片切角方法,提高网页加载速度并优化用户...

    CSS3 特效范例整理

    CSS3 總特效整理範例 CSS3邊框特效: CSS3:(右下邊框圓角效果)border-bottom-right-radius 复制代码代码如下: border-bottom-right-radius:2em; -moz-border-radius-bottomright:2em; -webkit-border-bottom-right-...

    CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

    CSS中的`border-radius`属性是CSS3引入的一个强大的特性,用于创建圆角边框效果,使得元素的四个角可以平滑地过渡到边框边缘,而不是直角显示。这一属性在现代浏览器中得到了广泛支持,但早期版本的浏览器,如...

    CSS3的Border-radius轻松制作圆角

    前面系统总结了CSS3中Gradient和RGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法;在CSS2中,大家都碰到过圆角的制作,如今CSS3中的border-radius出现后,让我们没有那么多的烦恼了

    text-decoration 、border-radius与其他属性的区别

    ### text-decoration、border-radius与其他CSS属性的区别 #### 一、引言 在Web前端开发过程中,CSS(层叠样式表)被广泛应用于控制HTML元素的布局、颜色、字体等样式。其中,`text-decoration` 和 `border-radius`...

    CSS3使用border-radius属性制作圆角

    在网页设计中,CSS3的border-radius属性是一个强大的工具,它使得我们可以轻松地为HTML元素创建圆角,而无需使用图片或者其他复杂的布局技巧。本篇文章将深入探讨CSS3的border-radius属性,以及如何通过它来制作圆角...

    border-generator:border-radius属性可以更改多个值。 预览更改这些值时的形状

    用户可以看到一个框,该框已应用了border-radius属性 用户可以更改应用于框的4个border-radius值(左上,右上,左下,右下) 用户可以将生成CSS复制到剪贴板 奖励功能 用户可以更改边界半径的所有8种可能的值,...

    css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

     使用CSS3样式单词:border-radius  语法:  div{border-radius:5px}  对图片设置圆角样式:  .abc img{border-radius:5px}  设置class=”abc”对象图片四个角圆角为5px  三、CSS圆角实现图片圆形实例  首先...

    border_radius属性画出水滴样式

    border_radius属性画出水滴样式

Global site tag (gtag.js) - Google Analytics