Question

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

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;

我知道border radius属性，它的语法很短，但我不明白'/'之后的值是什么。

Answer 1

第一组值定义水平半径。可选的第二组值（以“/”开头）定义垂直半径。如果仅提供一组值，则它将用于垂直和水平半径。

Answer 2

/之后的值是矩形每个角的圆周实际值。

/之后的第一个值是与左上角一角有关的值。第二个是关于右上角，第三个关于右下角，最后一个关于左下角。

看一下这个例子：https://jsfiddle.net/NikolaosG/agevgutL/

一个带有正方形的绿色方框，其每个角都根据CSS规则四舍五入到相应的数值。

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

Answer 3

完整表格是这样的：

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

或者我们可以写：

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;

例如：

左上角：左上角的曲率。

右下角：右下角右侧的曲率。

每个角落不仅可以与其他角落不同，也可以在不同的侧面。

＆＃13;

.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}

＆＃13;

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

＆＃13;

CSS边界半径第二半径解释

3 个答案: