CSS border-radius属性介绍

概述

border-radius 属性是 CSS3 中的圆角属性，它允许你为 HTML 元素的边框添加圆角。

语法

border-radius: value;

value 参数是一个四个值的空格分隔列表，每个值对应元素的一个角，并且以顺时针方向应用到每个角。如下：

border-radius: 1px 2px 3px 4px;
/* top-left: 1px, top-right: 2px, bottom-right: 3px, bottom-left: 4px */

border-radius: 1em 2em;
/* top-left & bottom-right: 1em, top-right & bottom-left: 2em */

border-radius: 10% 50%;
/* top-left & bottom-right: 10%, top-right & bottom-left: 50% */

border-radius: 1px;
/* all four corners: 1px */

值可以是一个长度、百分比或者是 inherit。

继承

border-radius 属性不被继承，但子元素可以继承其父元素分配的值。

属性值

以下是 border-radius 支持的所以属性值：

length

用像素单位指定圆角半径。相当于水平方向的半径值和竖直方向的半径值都设置为指定的值。

border-radius: 10px;

percentage

用百分比指定圆角半径。相当于水平方向的半径值和竖直方向的半径值都设置为元素宽度的百分比值。

border-radius: 50%;

注意：对于绝对定位元素，百分比值以浏览器窗口作为参照对象。

/ 分割线

此语法用于单独设置水平半径和竖直半径，其中第二个参数（竖直半径）可选。若未指定，则默认与第一个参数相等。

border-radius: 10px / 20px;
border-radius: 10px / 20%;
border-radius: 50% / 20px;
border-radius: 50% / 20%;
border-radius: 50%;

inherit

从父元素继承 border-radius 属性。

多数值语法

支持多数值语法，其中还可以用 / 语法来具体指定某个角的半径。

border-radius: 10px 0 10px 0/20px 0 30px 0;

切角示例

border-radius 属性不仅可用于圆角，也可用于各种形状的边角处理。

圆角

border-radius: 50%;

椭圆形

border-radius: 50% / 30%;

长方形（上下）

border-radius: 10px / 100px;

梯形（上下）

border-radius: 50% 50% 0 0 / 300% 300% 0 0;

非对称

border-radius: 25% 0 50% 75% / 90% 0 90% 0;

棱锥

border-radius: 30px 50px 0 0 / 90% 90% 0 0;

总结

border-radius 属性让 HTML 元素的边角变得更加灵活，同时使得元素的呈现效果更加美观。通过对值的组合和创意的灵活运用，可以实现各种各样的形状和效果。

参考文献

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
• https://www.w3schools.com/cssref/css3_pr_border-radius.asp