如何在 CSS 中创建凹形边框效果？

使用渐变创建凹面效果

在 CSS 中，border-radius 是向元素边缘添加曲线的强大工具。然而，它仅限于创建凸形边界，即曲线向外凸出。如果您想要一个凹形边框（曲线向内倾斜）怎么办？

示例：凸形边框

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}</code>

尝试的解决方案

要创建凹形边框，您可以尝试使用负值的边框半径。但是，这种方法在 CSS 中不起作用。

解决方案：径向渐变

虽然无法单独使用 CSS 创建真正的凹形边框，但可以模拟使用径向渐变的效果。渐变允许您在颜色之间创建平滑的过渡，并且通过使用多个渐变，您可以创建弯曲边缘的错觉。

考虑以下示例：

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}</code>

此 CSS 创建了两个重叠形成凹边缘的径向渐变。第一个渐变以 -20% 的透明圆圈开始，并在 100% 时过渡到纯色 #888888。第二个渐变的效果相同，但从 120% 开始。

以上是如何在 CSS 中创建凹形边框效果？的详细内容。更多信息请关注PHP中文网其他相关文章！