最新消息:红方科技年末特惠:.com域名55元、云虚机五折优惠,买3年送2年,更有智能建站套餐等你来取!

border-radius

SEO+UI+JS yinhexi 2013浏览 0评论

语法:

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

完整的代码如下:


<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>CSS3的border-radius属性</title>
 <style>
 .circle {
 background-color:#f00;
 width: 600px; /* div的宽和高为600px即正方形的边长为600px */
 height: 600px;
 text-align: center;

 -moz-border-radius: 300px; /* 圆的半径为边长的一半,即300px */
 -webkit-border-radius: 300px;
 border-radius: 300px;

 display: -moz-box;
 display: -webkit-box;
 display: box;

 -moz-box-orient: horizontal;
 -webkit-box-orient: horizontal;
 box-orient: horizontal;

 -moz-box-pack: center;
 -moz-box-align: center;

 -webkit-box-pack: center;
 -webkit-box-align: center;

 box-pack: center;
 box-align: center;

 font:normal 80px/100% Arial;
 text-shadow:1px 1px 1px #000;
 color:#fff;
 }
 </style>
 </head>
 <body>
 <div class="circle">
 Hello,World!
 </div>
 </body>
 </html>

运行效果截图(Chrome):

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


<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8" />
 <title>The Olympic Flag</title>
 <style type="text/css" media="screen">
 body {
 margin:20px;
 background-color:#efefef;
 }
 ul.flag {
 list-style-type:none;
 position: relative;
 margin: 20px auto;
 }

 .flag li, .flag li:before, .flag li:after {
 -webkit-border-radius: 6em;
 -moz-border-radius: 6em;
 border-radius: 6em;
 position: absolute;
 }

 .flag li {
 width: 12em;
 height: 12em;
 left: 0;
 top: 0;
 font-size: 1em;
 }

 .flag li:after {
 display: block;
 content: "";
 top: -0.1em;
 left: -0.1em;
 right: -0.1em;
 bottom: -0.1em;
 border: solid 1.4em black;
 }

 .flag .blue { z-index: 10; left: 0; top: 0; }
 .flag .yellow { z-index: 20; left: 6.8em; top: 5.7em; }
 .flag .black { z-index: 21; left: 13.6em; top: 0; }
 .flag .green { z-index: 20; left: 20.4em; top: 5.7em; }
 .flag .red { z-index: 10; left: 27.2em; top: 0px; }

 .flag .blue:after { border-color: blue; }
 .flag .yellow:after { border-color: yellow; }
 .flag .black:after { border-color: black; }
 .flag .green:after { border-color: green; }
 .flag .red:after { border-color: red; }
 /* 蓝色压住黄色 */
 .flag .blue.alt { z-index: 24; }
 .flag .blue.alt,
 .flag .blue.alt:before,
 .flag .blue.alt:after {
 border-top-color: transparent;
 border-left-color: transparent;
 border-bottom-color: transparent;
 }
 /* 黄色压住黑色 */
 .flag .yellow.alt { z-index: 23; }
 .flag .yellow.alt,
 .flag .yellow.alt:before,
 .flag .yellow.alt:after {
 border-right-color: transparent;
 border-left-color: transparent;
 border-bottom-color: transparent;
 }
 /* 绿色压住黑色 */
 .flag .green.alt { z-index: 23; }
 .flag .green.alt,
 .flag .green.alt:before,
 .flag .green.alt:after {
 border-top-color: transparent;
 border-right-color: transparent;
 border-bottom-color: transparent;
 }
 /* 红色压住绿色 */
 .flag .red.alt { z-index: 23; }
 .flag .red.alt,
 .flag .red.alt:before,
 .flag .red.alt:after {
 border-top-color: transparent;
 border-right-color: transparent;
 border-left-color: transparent;
 }
 </style>
 </head>
 <body>
 <ul class="flag">
 <li class="blue"></li>
 <li class="blue alt"></li>
 <li class="yellow"></li>
 <li class="yellow alt"></li>
 <li class="black"></li>
 <li class="green"></li>
 <li class="green alt"></li>
 <li class="red"></li>
 <li class="red alt"></li>
 </ul>
 </body>
 </html>

运行效果截图(Chrome):

转载请注明:红方博客 » border-radius