CSS 边框半径第二个半径的解释说明

Question

我可以翻译。以下是您需要翻译的内容：

我在阅读https://developer.mozilla.org/en/docs/Web/CSS/border-radius上的文档。

边框半径属性似乎有第二个半径值，

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

我知道边框半径属性及其简短语法，但我不明白斜杠后面的值是做什么的。

- Seif Sayed

Answer 1

第一组值定义水平半径。可选的第二组值，前面加上“/”，定义垂直半径。如果只提供了一组值，则该值用于垂直和水平半径。

- Seif Sayed

Answer 2

完整的表单大致如下：

border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;

or we can write:

border-radius: top-left-up top-right-up bottom-right-down bottom-left-down /
               top-left-left top-right-right bottom-right-right bottom-left-left;

例如：

顶部左侧上方：顶部左侧角的上侧曲率。

底部右侧右侧：底部右侧角的右侧曲率。

每个角可以有不同的曲率，不仅与其他角不同，而且在自身的不同侧面也可以不同。

.box {
 background: green;
  width: 200px;
  height: 200px;
  border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
  margin-bottom: 20px;
}
.box2 {
 background: green;
  width: 200px;
  height: 200px;
  border-radius: 10px 50px 50px 50px / 50px 50px 50px 50px;
  margin-bottom: 20px;
}
.box3 {
 background: green;
  width: 200px;
  height: 200px;
  border-radius: 50px 50px 50px 50px / 10px 50px 50px 50px;
  margin-bottom: 20px;
}
.box, .box2, .box3 {display: inline-block}

<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>

- ata

---

"或者我们可以写成："的例子使得这一点非常容易理解。 - oldboy

Answer 3

在矩形后面的数值是每个圆角的实际数值。第一个数值与左上角有关，第二个数值与右上角有关，第三个数值与右下角有关，最后一个数值与左下角有关。看一下这个例子：https://jsfiddle.net/NikolaosG/agevgutL/。这是一个绿色的盒子，里面有一个正方形，每个角都按照 CSS 规则相应地进行了圆角处理。

.box {
  background: green;
  width: 200px;
  height: 200px;
  border-radius: 10px 5% / 50px 20px 30px 5px;
}

- Nick Gatzouli

---

抱歉，如果 / 后面的值是实际值，那么前面的值是什么？ - Seif Sayed

这些是指第一个半径值。另外一些是指最终的半径值。如果你觉得复杂，可以忽略它们，像在边距或填充中使用4个值一样。 - Nick Gatzouli

抱歉，我认为我的答案不是100％全面的。当我说“第一”时，我指的是以下内容：https://jsfiddle.net/NikolaosG/agevgutL/1/ - Nick Gatzouli