如何用CSS实现盒子内外圆角？

为盒子内部及其边框实现圆角

背景

为盒子的内部和外部创建圆角可以增强设计的视觉吸引力。然而，在不影响两个元素的边框的情况下实现这种效果可能具有挑战性。本指南探讨如何使用 CSS 实现这种所需的效果。

内边框计算

要将圆角应用于内框，您需要计算内边框半径。这是通过从外边框半径中减去边框宽度来完成的。

• 内边框半径 = 外边框半径 - 边框宽度

在此情况下，外边框半径为 6px，边框宽度为5px:

• 内边框半径 = 6px - 5px = 1px

更新的 CSS：

.radius-all { border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

申请一般边框

如果您对边框和内部内容使用单独的框，请将 border-radius 属性及其供应商特定版本应用于两个框，以获得一致的圆角。

示例（单独盒）：

<div>

示例（单盒）：

.rounded-borders {
    border-radius: 5px;
}

<div>

以上是如何用CSS实现盒子内外圆角？的详细内容。更多信息请关注PHP中文网其他相关文章！