CSS中较短边的圆边

Question

我想让我的文字输入在短边上是圆边，这是垂直边。我需要的效果如下：

如果我使用border-radius: 50%;，这使得corders完全圆，我得到了这个：

我需要的效果可以通过向border-radius提供一些随机大数来实现，这就是我所做的：border-radius: 9999px;。

有没有更好的方法，哪些不涉及虚假数字？

Answer 1

只需使用大量数字，例如

border-radius: 9999999px;

.horizontal {
  width: 175px;
  height: 50px;
}
.vertical {
  width: 50px;
  height: 175px;
}
.box {
  border-radius: 9999999px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
  background: blue;
}

<div class="horizontal box"></div>
<div class="vertical box"></div>

根据spec，

，这是有效的

  

拐角曲线不得重叠：当任意两个相邻的总和   边界半径超过边框的大小，UAs必须   按比例减少所有边界半径的使用值，直到没有   它们重叠。

Answer 2

我通常会选择：

border-radius: 15px;

如果你打开Inspect Element，你可以修改这些值，看看哪个看起来最好而不必编辑服务器上的代码

Answer 3

最好，最简单，最直接的方法是使用一个像素的边框半径，它恰好是盒子高度的一半。

box {
    border-radius: __px /* Half Box Height */;
}

但是，如果你需要使用不依赖于固定像素的动态值，那么总是有一种方法。

box:after, box:before {
    border-radius: 50%;
    content: "";
    background-color: lightblue;
    top: 0;
    bottom: 0;
    position: absolute;
    width: __px /* Box Height */;
    z-index: 1;
}
box:before {
    left: 0;
    transform: translateX(-50%);
}
box:after {
    right: 0;
    transform: translateX(50%);
}
box {
    position: relative;
}

还有一个名为calc()的实验性CSS功能。将来，您可以通过calc() - 将百分比转换为像素来实现此目的。

CSS规则border-radius: calc(0px+100%);只有在calc()完全开发后才能生效。该规则会将100%转换为像素单位。

您也可以将border-radius设置为9999px或任意大量的像素，尽管此＆＃34;技巧＆＃34;可能不兼容跨浏览器。根据CSS规范...

  

拐角曲线不得重叠：当任意两个相邻边界半径的总和超过边框的大小时，UAs必须按比例减少所有边界半径的使用值，直到它们都不重叠。