避免CSS边框半径中的椭圆形 [英] Avoid elliptical shape in CSS border-radius

问题描述

对矩形div使用Border-radius CSS会产生椭圆形的角，而不是圆角.如何获得矩形div的完美圆角?

Using Border-radius CSS for rectangular divs produces elliptical corners instead of rounded corners. How can I get perfect rounded corners for rectangular divs?

推荐答案

通常，border-radius属性的语法为每个角接受2个值:垂直半径和水平半径(以斜杠分隔).下一行将创建一个椭圆形的边框半径，类似于上面的第三张图片.

Formally, the syntax for the border-radius property accepts 2 values for each corner: a vertical radius and a horizontal radius (separated by a slash). The following line would create an elliptical border-radius similar to the third image above.

border-radius: 5px/10px;

通常，我们只指定一个值.在这种情况下，该值将同时用作垂直半径和水平半径.下一行将创建一个圆形边框半径，类似于上面的第二个图像.

Usually, we only specify one value. In this case, that value gets used as both the vertical and horizontal radii. The following line would create a circular border-radius similar to the second image above.

border-radius: 10px;

---

使用百分比

Mozilla开发人员网络定义了可能的值该属性的类型如下:

The Mozilla Developer's Network defines the possible value types for this property as follows:

< length>
表示椭圆的圆半径或半长轴和半短轴的大小.可以CSS数据类型允许的任何单位表示.负值无效.

<length>
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS data types. Negative values are invalid.

< percentage>
使用百分比值表示圆半径或省略号的半长轴和半短轴的大小.水平轴的百分比表示框的宽度，垂直轴的百分比表示框的高度.负值无效.

当我们使用绝对 length 单位(例如像素或ems)时，使用单个值创建圆半径是很好的选择，但是当我们使用百分比时会变得更加复杂.由于此属性的单值用法等同于两次使用相同的值，因此以下两行是等效的；但是，这些不一定会产生圆形的边界半径.

Using a single value to create a circular radius is fine when we're using absolute length units like pixels or ems, but gets more complicated when we're using percentages. Since the single-value usage of this property is synonymous with using the same value twice, the following two lines are equivalent; however, these would not necessarily create a circular border-radius.

border-radius: 50%;
border-radius: 50%/50%;

这些线说创建一个椭圆或圆，其垂直半径等于元素高度的50％，水平半径等于元素宽度的50％，并将其用作边界半径.";.如果元素的宽度为200像素，高度为100像素，则将导致椭圆而不是圆形.

These lines say to "create an ellipse or circle whose vertical radius is equal to 50% of the element's height and whose horizontal radius is equal to 50% of the element's width, and use that as the border-radius.". If the element is 200 pixels wide and 100 pixels tall, this results in an ellipse rather than a circle.

解决方案

如果您想要一个圆形的边界半径，最简单的方法是使用绝对测量单位(例如像素或ems或除百分比外的任何东西)，但有时不适合您的用例，而您想使用百分比.如果您知道包含元素的长宽比，您仍然可以！在下面的示例中，由于元素的宽度是高度的两倍，因此我将水平半径缩放了一半.

If you want a circular border-radius, the easiest thing to do is to use absolute measurement units (like pixels or ems or anything besides percentage), but sometimes that doesn't fit your use case and you want to use percentages. If you know the aspect-ratio of the containing element, you still can! In the example below, since my element is twice as wide as it is tall, I've scaled the horizontal radius in half.

#rect {
  width: 200px;
  height: 100px;
  background: #000;
  border-radius: 25%/50%;
}

<div id="rect"></div>

另一种选择是提供足够大的像素值或任何其他绝对测量单位.如果该值超过最短边长度的一半，则浏览器将使用最小值作为两个方向上的边界半径，从而在矩形元素上生成完美的药丸形状.

Another option is to provide a sufficiently huge value in pixels or any other absolute measurement unit. If the value exceeds half of the shortest side's length, the browser will use the minimum as its border-radius in both directions, producing a perfect pill shape on rectangular elements.

#rect {
  width: 200px;
  height: 100px;
  background: #000;
  border-radius: 100000000000000px;
}

<div id="rect"></div>

这篇关于避免CSS边框半径中的椭圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！