在浏览器网页时,我们经常可以看到各种圆角效果。从用户体验上来说,圆角效果更加美观大方。在CSS2.1中,为元素添加圆角效果是一件很头疼的事情,大多数情况下都是借助背景图片这种老办法来实现。
在前端开发中,我们都是秉着“尽量少用图片”的原则。能用CSS实现的效果,就尽量不要用图片。因为每一个图片都会引发一次HTTP请求,加上图片体积大,会极大影响页面的加载速度。
一、border-radius实现圆角
1.border-radius属性简介
在CSS3中,我们可以使用border-radius属性为元素添加圆角效果。
border-radius:取值;
border-radius属性取值是一个长度值,单位可以是px、em和百分比等。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
width:200px;
height:150px;
border:1px solid gray;
border-radius:20px;
</style>
</head>
<div></div>
</body>
</html>
浏览器预览效果如下图所示。
border-radius:20px;指的是元素4个角的圆角半径都是20px。
2.border-radius属性值的4种写法
border-radius属性跟border、padding、margin等属性相似,其属性值也有4种写法。
- (1)border-radius设置1个值
例如,border-radius:10px;表示4个角的圆角半径都是10px,效果如下图所示。
- (1)border-radius设置两个值
例如,border-radius:10px 20px;表示左上角和右下角的圆角半径是10px,右上角和左下角的圆角半径都是20px,效果如下图所示。
- (1)border-radius设置3个值
例如,border-radius:10px 20px 30px;表示左上角的圆角半径是10px,左下角和右上角的圆角半径都是20px,右下角圆角半径是30px,效果如下图所示。
- (1)border-radius设置4个值
例如,border-radius:10px 20px 30px 40px;表示左上角、右上角、右下角和左下角的圆角半径,依次是10px、20px、30px、40px,效果如下图所示。
这里的“左上角、右上角、右下角、左下角”,大家按照顺时针方向来记忆就好了。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
width:200px;
height:100px;
border:1px solid red;
border-radius:10px 20px 30px 40px;
background-color:#FCE9B8;
</style>
</head>
<div></div>
</body>
</html>
浏览器预览效果如下图所示。
大家可以自行在本地编辑器中为border-radius属性设置不同值,然后查看实际效果如何。
在实际开发中,border-radius属性一般都是设置一个值,使得4个圆角效果都一样。4个圆角都搞得不一样,有必要这么花哨么?当然有啊,像下面这种效果就是这么花哨。对于下图的效果,关键是怎么实现标签前面的圆形。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
width:50px;
line-height:50px;
border-radius:80% 90% 100% 20%;
background-color:#E61588;
font-size:30px;
text-align:center;
color:White;
</style>
</head>
<div>6</div>
</body>
</html>
浏览器预览效果如下图所示。
二、border-radius实现半圆和圆
半圆分为:上半圆、下半圆、左半圆、右半圆。我们只要学会制作某一个方向的半圆,其他方向的半圆都可以轻松实现,因为原理是一样的。
假如我们要制作上半圆,实现原理是这样的:把高度(height)设为宽度(width)的一半,并且左上角和右上角的圆角半径定义与元素的高度一致,而右下角和左下角的圆角半径定义为0。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
width:100px;
height:50px;
border:1px solid red;
border-radius:50px 50px 0 0;
background-color:#FCE9B8;
</style>
</head>
<div></div>
</body>
</html>
浏览器预览效果如下图所示
在这个例子中,border-radius属性值等于圆角的半径。大家结合一下圆和矩形的数学知识,稍微想一想就知道上半圆该如何实现。
此外,请大家根据上面的原理自行思考下半圆、左半圆以及右半圆是如何实现。
在CSS3中,圆的实现原理是这样的:元素的宽度和高度定义为相同值,然后4个角的圆角半径定义为宽度(或高度)的一半(或者50%)。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
width:100px;
height:100px;
border:1px solid red;
border-radius:50px; /*或者:border-radius: 50%*/
background-color:#FCE9B8;
</style>
</head>
<div></div>
</body>
</html>
浏览器预览效果如下图所示。
在这个例子中,width和height属性值相同,border-radius属性值为width(或height)的一半,然后就可以实现一个圆了。
border-radius属性很强大,下图所示的“哆啦A梦”其实就是用border-radius结合其他CSS属性来实现的,很神奇吧?大家可以自己尝试制作一下(本教程附有源码)。
三、border-radius实现椭圆
在CSS中,我们也是使用border-radius属性来实现椭圆的。
border-radius:x/y;
x表示圆角的水平半径,y表示圆角的垂直半径。从之前的学习我们知道,border-radius属性取值可以是一个值,也可以是两个值。
当border-radius属性取值为一个值时,例如,“border-radius:30px;”表示圆角水平半径和垂直半径为30px,也就是说“border-radius:30px;”等价于“border-radius:30px/30px”,前者是后者的缩写,效果如下图所示。
当border-radius属性取值为两个值时,例如,“border-radius:20px/40px;”表示圆角的水平半径为20px,垂直半径为40px,效果如下图所示。
如果想要实现椭圆,原理如下:元素的宽度和高度不相等,其中4个角的圆角水平半径定义为宽度的一半,垂直半径定义为高度的一半。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
width:160px;
height:100px;
border:1px solid gray;
border-radius:80px/50px;
</style>
</head>
<div></div>
</body>
</html>
浏览器预览效果如下图所示。
用CSS实现椭圆在实际开发中也比较常见。此外,我们可以尝试使用border-radius属性来实现下面各种图形效果,以便加深理解。
四、border-radius的派生子属性
border-radius属性可以分别为4个角设置相应的圆角值,这4个角的属性如下。
- (1)border-top-right-radius:右上角
- (2)border-bottom-right-radius:右下角
- (3)border-bottom-left-radius:左下角
- (4)border-top-left-radius:左上角
本站所有教程均为原创,大部分已由人民邮电出版社出版成书。禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权行政保护法(法律顾问:张俊律师)
5.1 边框样式简介
请不要重复点赞喔