时间戳

首页 > 解决方案 > CSS 边框半径简写

css - CSS 边框半径简写

问题描述

我有这个CSS代码：

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

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

标签： css

解决方案

它应该是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

推荐阅读