• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

7.2 圆角border-radius属性

一、border-radius属性

我们在很多网站包括绿叶学习网都经常能看到圆角的效果。从用户体验和心理来说,圆角效果往往更为美观大方。

绿叶学习网导航圆角效果
在线工具圆角效果

在CSS2.1中,给元素实现圆角效果是很头疼的一件事。老办法都是使用背景图片来实现,制作起来相对的麻烦。但是CSS3中border-radius属性的出现,完美地解决了圆角效果难以实现的问题。

此外,在前端开发中,对于网页设计,我们都是秉着“尽量少用图片”的原则,能用CSS实现的效果,就尽量不要使用图片。因为图片需要引发http请求,并且传输量大,影响网页加载性能。就像绿叶学习网教程文章下方的这些小图标都是使用“自定义小图标字体”来实现,而不是使用图片来实现。在CSS进阶教程,我们有机会再给大家详细探讨一下“自定义小图标字体”的技巧。

在CSS3中,我们可以使用border-radius属性为元素添加圆角效果。

语法:

border-radius:长度值;

说明:

长度值可以是px、百分比、em等。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius属性</title>
    <style type="text/css">
    #div1
    {
        width:100px;
        height:50px;
        border:1px solid gray;
        border-radius:10px;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

“border-radius:10px;”指的是元素四个角的圆角半径都是10px。

二、border-radius属性值的4种写法

跟border、padding、margin等属性类似,对于圆角border-radius也有4种写法。

1、border-radius设置1个值

当border-radius设置1个值时,例如“border-radius:10px;”表示4个角的圆角半径都是10px。

2、border-radius设置2个值

当border-radius设置2个值时,例如“border-radius:10px 20px;”表示左上角和右下角的圆角半径是10px,右上角和左下角的圆角半径都是20px。

3、border-radius设置3个值

当border-radius设置3个值时,例如“border-radius:10px 20px 30px;”表示左上角圆角半径是10px,左下角和右上角圆角半径都是20px,右下角圆角半径是30px。

4、border-radius设置4个值

当border-radius设置4个值时,例如“border-radius:10px 20px 30px 40px;”表示左上角、右上角、右下角和左下角的圆角半径依次是10px、20px、30px、40px。

这里的“左上角、右上角、右下角和左下角”,大家按照顺时针方向记忆就记住了。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid red;
        border-radius:10px 20px 30px 40px;
        background-color:#FCE9B8;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

大家可以在上面的在线测试中改变属性值来方便查看当border-radius属性设置不同值的效果。

此外,虽然本人在Web开发时间不是很久,但是根据自己经验而言,border-radius属性一般都是使用一个值的居多,有谁设计圆角的时候,四个圆角都搞得不一样(用得着那么花哨么= =!?)。

三、border-radius画实心半圆和实心圆

1、实心半圆

实心半圆分为:实心上半圆、实心下半圆、实心左半圆、实心右半圆。我们只要掌握制作一个方向的实心半圆的方法,其他方向的实心半圆就可以轻松实现,因为原理都一样。

假如我们要制作实现上半圆,实现方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的圆角半径与元素的高度一致,而右下角和左下角的圆角半径设置为0。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid red;
        border-radius:100px 100px 0 0;
        background-color:#FCE9B8;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

border-radius属性值是圆角的半径,大家结合圆和矩形的数学知识,稍微想一想就知道实现半圆实现原理究竟是怎样了。

此外,请大家根据上面的例子自行研究如何实现其他方向的实心半圆,把你的制作效果或代码在下方评论分享给大家吧。

2、实心圆

在CSS3中,使用border-radius属性实现实心圆方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius属性</title>
    <style type="text/css">
    #div1
    {
        width:100px;
        height:100px;
        border:1px solid red;
        border-radius:50px;
        background-color:#FCE9B8;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

站长推荐:下面是绿叶论坛的一个版主Balrogs小涛使用border-radius属性制作的哆啦A梦,这小子使用一个圆角属性就“走遍”了天下。有兴趣的同学可以去下载源码看看。

CSS3圆角实现哆啦A梦

源码地址:纯CSS3实现哆啦A梦

四、border-radius属性派生子属性

border-radius属性可以分开,分别为四个角设置相应的圆角值,分别是:

(1)border-top-right-radius:右上角;

(2)border-bottom-right-radius:右下角;

(3)border-bottom-left-radius:左下角;

(4)border-top-left-radius:左上角;

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部