是否可能是凹边界半径？

本文介绍了是否可能是凹边界半径？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个简单的凸示例。

Here is a simple convex example.

#test{
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}

但是，我想要一个凹的边界半径。

However, I want a concave border radius.

我尝试使border-radius为负，但这不起作用。

I tried making the border-radius negative but this did not work.

凹/凸示例：

推荐答案

您可以使用背景上的径向渐变给出凹边界的印象。例如，像这样的：

You can give the impression of a concave border using radial gradients on the background. For example, something like this:

#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;
}

请注意，大多数webkit浏览器仍需要放射渐变的前缀，想要完全支持旧的浏览器，您可能还需要实现旧的渐变语法。

Note that most webkit browsers still require prefixes for radial-gradients, and if you want to fully support older browsers you may need to implement the older gradient syntax too.

这篇关于是否可能是凹边界半径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！