在浏览器网页时,我们经常可以看到各种圆角效果。从用户体验上来说,圆角效果更加美观大方。在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 边框样式简介

          请不要重复点赞喔