如何利用Border-radius实现带弧形边缘的卡片？

直接用border-radius的多值语法就能精准控制单个或多个边角的弧度，完美匹配你要的效果：

1. 只给部分边角加圆角 #

如果参考图里只有顶部两个角是弧形、底部保持直角（或者反过来），按顺时针顺序写四个值就行：

.card {
  /* 左上、右上设20px圆角，右下、左下设0（直角） */
  border-radius: 20px 20px 0 0;
}

取值规则是左上 → 右上 → 右下 → 左下，缺省的话会自动对称取值。

2. 给不同边角设置不同弧度 #

要是需要不同角的弧形大小不一样，比如顶部左大、顶部右小，直接对应位置填不同数值：

.card {
  border-radius: 30px 10px 0 0;
}

3. 做大弧度的边缘（类似半圆弧） #

如果参考图是顶部/底部有一个大的弧形（不是小圆角），可以用斜杠分隔水平和垂直半径：

.card {
  /* 顶部做出半圆弧效果，注意要给卡片设置合适的高度，比如height: 150px */
  border-radius: 50% 50% 0 0 / 30px 30px 0 0;
}

斜杠前是水平方向的半径，后是垂直方向的半径，能做出椭圆弧形的边缘。

你可以根据参考图里的样式，调整具体的像素或百分比数值，直到达到理想效果。

内容的提问来源于stack exchange，提问作者Venkatesh Prasad