CSS3基础CSS3圆角矩形属性(border-radius)实例教程

CSS3圆角矩形属性(border-radius)实例教程

众所周知,通过CSS3的圆角矩形属性border-radius可以轻松的将矩形的四个角设置为平滑的圆角,如果给该属性只定义一个值,则表示四个角的圆角半径相同,如果分别定义四个值,则分别表示定义左上角、右上角、右下角和左下角(顺时针方向)的四角圆角半径,例如:

#a1 {
 background:#3a9;
 width:200px;height:200px;
 border-radius:15px 40px 15px 40px;
}

这里给这个矩形四个角分别定义了圆角半径,其显示效果是这样的:

CSS圆角边缘.png

这里如果将四个圆角的半径都设置为100px,例如:

#a1 {
 background:#0be;
 width:200px;height:200px;
 border-radius:100px;
}

此时整体刚好显示为一个正圆形,其半径为100px:

CSS圆角-圆形.png

和CSS边框属性类似,圆角属性也可以单独给某一个角设置圆角,border-radius属性实际上是一种简写的方式:

border-radius:100px;
 /*--上面这句相当于以下四句--*/
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-right-radius:100px;
border-bottom-left-radius:100px;

当然,这里border-radius后面也可以有两个值和三个值的定义方法,与margin和padding的简写方式相似,这里就不再赘述了,“三个值,四个值”什么的都弱爆了,“八个值”才是本篇文章的精华……

在数学解析几何中曾经学过,圆形是一种特殊的椭圆形,一个椭圆的形状由长半径和短半径决定,长半径和短半径相等的时候就表现为一个正圆形。在解析几何里,一般在直角坐标系中绘制椭圆形,所以长半径和短半径也有人称之为水平半径和垂直半径。

大多数情况下,我们使用border-radius属性设置圆角,设置的都是“正圆形”的圆角,比如上面定义的border-radius:100px,表示圆角的长半径和短半径都是100px,也就相当于:

border-radius:100px / 100px;

CSS圆角属性可以分别设置圆角的长半径和短半径来实现“椭圆”形的圆角,例如:

#a1 {
 background:#0be;
 width:200px;height:200px;
 border-radius:100px / 60px;
}

这里将长半径设置为100px,短半径设置为60px,得到的是这样的图形:

CSS圆角-圆角-椭圆.png

如果为矩形的四个角分别设置圆角长半径和短半径,则最多可定义8个半径值,例如:

border-radius:x1 x2 x3 x4 / y1 y2 y3 y4;

其中x1-x4分别表示左上角、右上角、右下角和左下角的长半径,而y1-y4分别表示左上角、右上角、右下角和左下角的短半径,例如:

#a1 {
 width:500px;height:400px;
 background-color:#cdf;
 border-radius:100px 90px 80px 120px / 90px 80px 80px 70px;
}

这里随意设置了8个半径值,效果如下,但如果不理解这8个值的含义,则很难明白下图怎么得到的:

CSS圆角半径8个值.png

从显示结果可以看出,这四个圆角的形状有正圆也有椭圆,也许这样并不能很清楚的理解上面8个值的含义,接下来我分别以这8个半径值“绘制”四个椭圆,再分别定位到四个角落,便能清晰的看出指定长半径和短半径所实现的圆角效果:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
#a1 {
 width:500px;height:400px;
 background-color:#cdf;
 border-radius:100px 90px 80px 120px / 90px 80px 80px 70px;
 position:relative;
}
.b1,.b2,.b3,.b4 {position:absolute;z-index:2;}
.b1 {
 width:200px;height:180px;
 border-radius:100px / 90px;
 background-color:#7c7;
 left:5px;top:5px;
 }
.b2 {
 width:180px;height:160px;
 border-radius:90px / 80px;
 background-color:#b5e;
 right:5px;top:5px;
}
.b3 {
 width:160px;height:160px;
 border-radius:80px / 80px;
 background-color:#06d;
 right:5px;bottom:5px;
}
.b4 {
 width:240px;height:140px;
 border-radius:120px / 70px;
 background-color:#ff6;
 left:5px;bottom:5px;
}
</style>
</head>
<body>
<div id="a1">
 <div class="b1"></div>
 <div class="b2"></div>
 <div class="b3"></div>
 <div class="b4"></div>
</div>
</body>
</html>

浏览这个网页,所展示的效果如下图:

CSS圆角半径8个值2.png

四个圆角的半径从上图可以很清楚的看出来,为了更直观的了解上述x1-x4和y1-y4所表示的值,下图标出了这四个椭圆的长半径和短半径:

CSS3圆角半径示意图.png

所以,当圆角矩形的诸多半径值让您一头雾水的时候,可以在脑海里想象一个椭圆形,这样就知道怎么设置长短半径了,通过分别设置四个角的长半径和短半径,可以实现很多特殊的图形,例如:

#rain {
 width:250px;height:250px;
 background-color:#3a7;
 border-radius:250px 0 170px 80px / 170px 0 250px 80px;
 position:relative;
}

这里简单的实现了天气预报图案中常见的雨滴效果:

CSS制作水滴图案.png

如果通过伪元素再复制几个“雨滴”,便能呈现出“中雨”或“暴雨”的效果了,下面这个图案也很常见:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
.map {
 position:relative;
 border-radius:90px 10px 90px 100px;
 width:190px;height:190px;
 background-color:#6c9;
 transform:scale(0.95,1) rotate(135deg);
}
.map:before {
  content:" ";
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  width:100px;height:100px;
  border-radius:50px;
  background-color:#fff;
  margin:auto;
}
</style>
</head>
<body>
<div class="map">
</div>
</body>
</html>

这里通过圆角属性配合2D缩放和旋转的相关定义,实现了一个简单的地图定位的图标:

CSS地图定位标记.png

在圆角属性border-radius里,除了通过具体数值设置半径以外,还可以通过百分比来设置,这里的百分比相对于矩形的宽和高,例如:

.c1 {
 width:200px;height:160px;
 border-top-left-radius:50%;
 background-color:#a4e;
 }

这里设置了左上角圆角的长半径和短半径都为50%,得到的图案如下:

CSS圆角半径-百分比.png

从添加的辅助线可以看出,此时长半径为矩形宽的50%,短半径为矩形高的50%。

一般将一个正方形四个圆角半径都设置为边长的一半,则可以得到一个正圆形,所以实现圆形最常用的做法就是给正方形增加下面这条定义:

border-radius:50%;

通过分别设置长半径和短半径,也很容易实现半圆形的图案,例如:

.c2 {
 width:200px;height:100px;
 border-radius:50% 50% 0 0 / 100% 100% 0 0;
 background-color:#a4e;
 }

CSS半圆.png

也就是说,把元素的高度设为宽度的一半,并设置左上角和右上角的圆角半径与元素的高度一致,即可将元素显示为半圆形。

文章的结尾,结合圆角矩形(border-radius)和裁剪(clip)属性来做一个漂亮的游泳圈:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
body {
 background-color:#eee;margin:20px;
}
.swim {
 width:200px;height:200px;
 border-radius:50%;
 border:100px solid #fff;
 position:relative;
 }
.swim:before {
 content:" ";
 position:absolute;right:-100px;bottom:-100px;
 width:200px;height:100px;
 border-radius:0 0 200px 200px;
 border:100px solid #f11;
 clip:rect(102px,auto,auto,198px)
}
.swim:after {
 content:" ";
 position:absolute;left:-100px;top:-100px;
 width:200px;height:100px;
 border-radius:200px 200px 0 0;
 border:100px solid #f11;
 clip:rect(0px,198px,198px,0px)
}
</style>
</head>
<body>
<div class="swim">
</div>
</body>
</html>

CSS制作的游泳圈.png

灵活的使用圆角属性可以实现很多有趣的图案,例如本文曾分享了制作小雨滴图案的示例,之后的文章里,本站将分享天气预报中的其他图标的制作……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.sz-kmd.com.cn/css3/22.html