CSS border-radius 制作特殊圆

以前只知道 border-radius 有一个圆角半径,今天在做一个半圆的时候突然发现,它还有 x 轴和 y 轴属性。

先来看一下 MDN 中 border-radius 说明:

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

该属性是一个 简写属性,是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius,和 border-bottom-left-radius 简写为一个属性。

也就是说,每个圆角都有 圆角半径水平半长轴垂直半长轴 属性值:

border-radius示例

1
2
3
4
5
6
7
border-radius: 1em;

/* 等价于: */
border-top-left-radius: 1em;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
1
2
3
4
5
6
7
border-radius: 1em/5em;

/* 等价于: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

还有一个复杂一些的 demo

1
2
3
4
5
6
7
border-radius: 4px 3px 6px / 2px 4px;

/* 等价于: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

按照 MDN 上示例的拓展

半圆

1
2
3
4
5
6
.semicircle {
width: 100px;
height: 50px;
background: red;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

气泡

1
2
3
4
5
6
.bubble {
width: 120px;
height: 120px;
background: red;
border-radius: 60px 60px 0 60px;
}

鸡蛋

1
2
3
4
5
6
.egg {
width: 120px;
height: 160px;
background: red;
border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;
}

DEMO 在 CodePen.io

参考:

MDN : https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius