border-radius

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

您可以通过 CSS 应用 border-radius 为任何元素赋予“圆角”。只有在涉及颜色变化时您才会注意到它。例如,如果元素的背景颜色或边框颜色与它上方的元素不同。

.element {
  border-radius: 10px;
}
 
 

组成属性

border-radius 是我们所说的“简写”属性。这意味着它在一个声明中设置以下各个属性

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

逻辑属性

这些被称为“物理”属性,因为它们根据角的物理位置(例如左上)设置半径。但 border-radius 是逻辑属性和值规范的一部分,这意味着它具有 物理属性的逻辑等效项

物理属性逻辑属性
border-top-left-radiusborder-start-start-radius
border-top-right-radiusborder-start-end-radius
border-bottom-left-radiusborder-end-start-radius
border-bottom-right-radiusborder-end-end-radius

起初有点令人费解,但顺序确实很重要,尤其是在将 border-radius 作为简写使用时。顺序如下,其中第一个方向指的是块方向,第二个方向指的是内联方向。

物理属性逻辑属性
左上开始-开始
右上开始-结束
左下结束-开始
右下结束-结束

语法

border-radius: <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
  • 初始值: 0
  • 应用于:所有元素
  • 继承:
  • 计算值:一对计算的 <length-percentage> 值
  • 动画:按计算值

border-radius 属性最多接受四个长度或百分比值,其中一个值同时为所有四个角设置半径,而四个值分别设置每个角。

/* Single value */
/* Sets all four corners */
border-radius: 10px;

/* Two values /*
/* top-left and bottom-right top-right and bottom-left  */
border-radius: 25% 0;

/* Three values */
/* top-left top-right/bottom-left bottom-right */
border-radius: 1rem 1.5rem 1.25rem;

/* Four values */
/* top-left top-right bottom-right bottom-left */
border-radius: 8px 10px 12px 14px;

/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

因此,如果我们想要在左上和右下角设置不同的半径,但在右上和左下角应用相同的半径,我们可以使用三值语法

.element {
  /* top-left top-right/bottom-left bottom-right */
  border-radius: 5px 20px 5px;
  background: #BADA55;
}
 
 

椭圆形圆角 (/)

您还可以指定角的圆角半径。换句话说,圆角不一定是完美的圆形,可以是椭圆形。这是通过在两个值之间使用斜杠 (/) 来完成的

.element {
  border-radius: 10px / 30px; /* horizontal radius / vertical radius */
}
 
 

注意: Firefox 仅在 3.5+ 版本中支持椭圆形边框。较旧的 WebKit 浏览器(例如 Safari 4 及更低版本)会错误地将 40px 10px40px / 10px 等同对待。

border-radius 属性可以接受任何有效的 CSS 长度单位。这意味着从 pxrememchvhvw 等,以及更多其他单位都是可以使用的。

您可以以百分比指定 border-radius 的值。这对于创建 圆形或椭圆形 特别有用,但可以在您希望 border-radius 与元素宽度直接相关联的任何时候使用。

.element {
  border-radius: 50%;
  width: 200px;
}
 
 

注意: 在 Safari 中,border-radius 的百分比值仅在 5.1+ 版本中受支持。在 Opera 中,仅在 11.5+ 版本中受支持。

注意事项

在使用 border-radius 属性时,有一些需要注意的事项

裁剪背景图片

如果元素有图片背景,它会自然地在圆角处被裁剪。

.element {
  border-radius: 20px;
  background: url(bglines.png); /* will get clipped */
}

背景颜色溢出

有时,当存在border-radius时,你会看到background-color“泄漏”到边框之外(这是一个完美的例子)。为了防止这种情况,可以使用CSS的background-clip属性。

.element {
  border-radius: 10px;

  /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
}

重叠的圆角

Jay Sitter 讲解了当一个角的圆角值过大以至于与另一个角的圆角重叠时会发生什么。就像这个例子,我们想要在右侧创建一个“药丸”形状,而在左侧则圆角较小。

我们设置了左上角和左下角的圆角为40px,但为什么它们看起来如此方正?这是因为其他两个角的999em值覆盖了它们。Jay 深入探讨了背后的数学原理以及如何防止这种情况发生,因此阅读他的文章以了解更多背景信息是值得的。

演示

浏览器支持

此浏览器支持数据来自Caniuse,其中包含更多详细信息。数字表示浏览器从该版本及以上版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
4*3*9123.1*

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271272.1*3.2*

现在不需要前缀了,但是为了获得最佳的浏览器支持,你可以使用-webkit--moz-作为属性前缀,以确保旧版浏览器也能正常使用该功能。

.element {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}

请注意这些属性的顺序:供应商前缀首先列出,非前缀“规范”版本最后列出。这是正确的做法。圆角边框是一个特别好的例子,说明了我们为什么要这样做。在使用border-radius的稍微复杂一点的版本(其中传递两个值而不是一个值)中,旧的-webkit-供应商前缀会执行与“规范”版本完全不同的操作。因此,如果我们盲目地将相同的值复制粘贴到所有三个属性中,可能会在不同浏览器中看到不同的结果。为了长期保持最大的一致性,最好将“规范”版本放在最后。

现在可以放心地删除前缀,只使用原生border-radius如这里所述

以下是每个单独的属性,以及供应商前缀。

.element {
  -webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;

  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 4px;

  border-top-left-radius: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 4px;
}

这些值中的每一个也可以具有空格分隔的值,例如5px 10px,其行为与简写中的斜杠分隔的值相同(<horizontal-radius> [space] <vertical-radius>)。