Question

我有以下CSS代码：

border-radius: 50%/15px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

我正在尝试在单个border-radius属性中编写代码，但是没有任何运气。有可能吗？

Answer 1

应为border-radius: 10px 10px 50% 50% / 10px 10px 15px 15px;

请参见https://developer.mozilla.org/de/docs/Web/CSS/border-radius

#shorthand {
  border-radius: 10px 10px 50% 50% / 10px 10px 15px 15px;
   /* 
    It's follwing order 1 2 3 4 / 5 6 7 8 
    1: horizontal top left
    2: horizontal top right
    3: horizontal bottom right
    4: horizontal bottom left
    5: vertical top left
    6: vertical top right
    7: vertical bottom right
    8: vertical bottom left
    That means starting from top left clockwise, before the slash horizontal and after the slash vertical
   */
}
#original, #shorthand {
  border-color: silver;
  border-width: 1px;
  width: 161px;
  height: 100px;
  background-color: goldenrod;
  margin: 20px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}
#original {
  border-radius: 50%/15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

<div id="original">Original</div>

<div id="shorthand">Shorthand</div>

您可以在此处查看示例：https://codepen.io/HerrSerker/pen/BGJyKv?editors=0100

CSS border-radius速记

1 个答案: