通过CSS实现圆角

2019-02-10 17:37:09

传统的圆角是借助于图片作为背景图案生成的。但在CSS3中我们只需要修改一下 border-radius 属性就可以实现圆角。
使用CSS3来实现圆角的好处显而易见，无需花费大量时间去做图片，提高网页速度等。

一、实现方法

border-radius: 10px ; /* 可以是 px、百分比、em 等 */
如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。如下：
border-radius: 10px 10px 10px 10px ; /* 可以是 px、百分比、em 等 */

也可以分别设置四个角，如下：
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;

二、完整实例

1.四个角都设置为一个值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width: 100px;
            height: 50px;
            border-radius: 10px; /* 可以是 px、百分比、em 等; 但并非所有浏览器，都支持百分比。因此，目前最安全的做法就是避免使用百分比值。*/
            background-color: black;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.通过设置四个角的值显示特殊形状

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width: 50px;
            line-height: 50px;
            border-radius: 100% 100% 100% 20%;
            background-color: black;
            color: white;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>f</div>
</body>
</html>

三、浏览器支持

IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版本的Firefox支持-moz-border-radius属性。
目前来看，为了保证兼容性，只需同时设置-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;
border-radius: 15px; /* 注意：border-radius必须放在最后声明，否则可能会失效。*/

另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。
* -moz-border-radius-topleft（标准语法：border-top-left-radius）
* -moz-border-radius-topright（标准语法：border-top-right-radius）
* -moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）
* -moz-border-radius-bottomright（标准语法：border-bottom-right-radius）