对边边界半径

Question

我不知道这是否存在，但我正在为自己制作一个小型 Web 构建器，在其中添加新的 HTML 元素，为其提供我想要的属性及其值。 之后，我通过 Javascript 进行了一些 CSS 更改，对于 border-radius，我使用了这个：

function borderRadius(){
    var dr = document.getElementById("displayColor");
    var rv = document.getElementById("radiusValue");
    var tl = document.getElementById("tl").value;
    var tr = document.getElementById("tr").value;
    var bl = document.getElementById("bl").value;
    var br = document.getElementById("br").value;
    rv.innerHTML = 'Top-Left: '+tl+'%; Top-Right: '+tr+'%; Bottom-Left: '+bl+'%; Bottom-Right: '+br+'%;';
    dr.style.borderTopLeftRadius = tl+'%';
    dr.style.borderTopRightRadius = tr+'%';
    dr.style.borderBottomLeftRadius = bl+'%';
    dr.style.borderBottomRightRadius = br+'%';  
}

这段代码并不重要，它看起来像..

现在我的问题是我可以通过 CSS 制作类似的东西

周围不做额外的元素？

更新：

正如 GabyakaG.Petrioli 所说，这可能是一个解决方案，有了它我已经成功了一半：

.round {
    background:
        radial-gradient(circle at 0 50%, rgba(204,0,0,0) 40%, #c00 10%),
        radial-gradient(circle at 100% 50%, rgba(204,0,0,0) 40%, #c00 10%),
        radial-gradient(circle at 100%, rgba(204,0,0,0) 40%, #c00 10%),
        radial-gradient(circle at 0, rgba(204,0,0,0) 40%, #c00 10%);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    
    padding: 10%;
    padding-left: 22%;
    padding-right: 22%;
}

<div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>

我也在这里找到了答案和解决方案，但我仍然有一些边距或其他东西：

*{margin: 0; outline:0; border: 0;}
.round {
    background:
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 70%, #c00 71%),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 70%, #c00 71%),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 70%, #c00 71%),
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 70%, #c00 71%);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
   width: 300px;
   height: 300px;
    padding: 10%;
    transform: rotate(45deg);
}
p{
  transform: rotate(-45deg);
  width: 100px;
  margin: 100px;
}

<div class="round"><p>

By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p></div>

Answer 1

不，目前在 CSS 中没有插入或反向边框半径。但是有很多方法可以创建这种形状。我有 answered your radial-gradient question in the other thread 但认为这是一个足够好的 shapes 问题，可以独立存在，因此在这里给出了详细的答案，并提供了所有不同的可能方法来创建它形状。

使用径向渐变：

只是为了他人的利益而在此处添加。这是重复但使答案完整。我们可以使用使用radial-gradient背景图片创建的四个椭圆（或圆圈）并将它们放置在适当的位置以创建此效果。 输出形状是响应式的，但当形状应具有仅限于形状边界的:hover 效果或具有非纯色作为填充/背景。它还需要一个方形容器（不是矩形）。

div {
  width: 300px;
  height: 300px;
}
.radial-grad {
  background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  transform: rotate(45deg);
  backface-visibility: hidden;
}

/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  width: 350px;
  height: 350px;
}

<div class='radial-grad'></div>

---

使用 SVG：

SVG 是创建此类复杂形状的推荐工具。我们可以使用path 元素及其各种命令轻松创建所需的形状。 SVG 是可扩展的（响应式的），非常容易创建和维护，允许更好地控制形状，如坡度等。它也可以支持渐变或图像背景。与radial-gradient 不同，这也适用于矩形容器。

通过修改二次曲线的控制点（Q 命令后提供的第一个坐标），我们可以控制截止区域的斜率/曲线。 path 元素的 d 属性可以通过 JS 设置或修改，就像我们对任何其他 HTML 属性所做的那样。

但我们必须记住，SVG 是一个图形（图像）。我们无法单独通过纯 SVG 控制您添加到页面的 HTML 元素。那将需要剪辑路径或类似的东西。

svg {
  height: 300px;
  width: 300px;
}

/* just for demo */

svg {
  transition: all 1s;
}
svg:hover {
  height: 200px;
  width: 250px;
}

<svg viewBox='0 0 200 200'>
  <defs>
    <pattern id='bg' width='200' height='200' patternUnits='userSpaceOnUse'>
      <image xlink:href='https://placeimg.com/200/200/nature' height='200' width='200' />
    </pattern>
  </defs>
  <path d='M0,0 Q100,60 200,0 Q140,100 200,200 Q100,140 0,200 Q60,100 0,0z' fill='url(#bg)'/>
</svg>

---

使用剪辑路径：

这类似于纯 SVG 版本，但与创建形状然后放置在容器后面或内部的版本不同，这里我们将容器元素本身切割成所需的形状 。

纯 CSS 方法（无 SVG）可用，但它还不支持复杂路径。它仅支持基本形状，因此我们必须将剪辑路径与 SVG 定义一起使用。此外，Firefox 仅在与 SVG 一起使用时才支持它（如 url(#id)）。 IE 仍然不支持 clip-path，这也是为什么它还不适合生产实施的原因之一。

当形状具有图像或渐变而不是纯色的背景时，这很好，并且当需要:hover 效果时也可以很好地工作，因为我们正在切割 列出所需的路径。

这更像是一个嵌入的边界半径，因为该元素不存在于剪切区域之外。

div {
  height: 300px;
  width: 300px;
  background-image: url(https://placeimg.com/200/200/nature);
}
.clip-path {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  height: 350px;
  width: 325px;
}

<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 Q0.5,0.3 1,0 Q0.7,0.5 1,1 Q0.5,0.7 0,1 Q0.3,0.5 0,0z' />
    </clipPath>
  </defs>
</svg>
<div class='clip-path'></div>

---

使用面具：

目前只有 WebKit 支持的浏览器支持此功能，因此现在不推荐，但它是一个非常未来的好选择。当形状的背景是图像或渐变而不仅仅是纯色时，这种方法特别有用。

遮罩的工作原理与 radial-gradient 方法非常相似，但不同之处在于radial-gradient 用纯色填充剩余空间，这只会掩盖不需要的部分，而不会添加任何自己的填充。因此，最初分配给元素的背景图像将被保留。

此方法如果我们希望具有仅限于形状边界的:hover 效果，因为它不会切掉不需要的部分，则效果不佳，它只是掩盖它们或使其透明。

与radial-gradient 方法类似，这也需要一个方形容器才能工作，但它是响应式的。

div {
  height: 300px;
  width: 300px;
  background-image: url(https://placeimg.com/200/200/nature);
}
.mask {
  -webkit-mask-image: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
  -webkit-mask-position: bottom left, bottom right, top right, top left;
  -webkit-mask-size: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  transform: rotate(45deg);
  backface-visibility: hidden;
}

/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  height: 350px;
  width: 350px;
}

<div class='mask'></div>

---

使用伪元素和盒子阴影：

我不推荐这种方法，因为它有很多缺点，但仍然是一种选择。如果我们只需要创建形状，不需要:hover 效果，不需要剪切区域是透明的（即剪切区域可以是纯色，比如这个sn-p中的白色）那么我们可以试试这个方法。

它包括将 2 个椭圆伪元素 放在顶部左侧，然后让它们的阴影在它们的相对侧完成工作。

div {
  position: relative;
  height: 300px;
  width: 300px;
  background: #c00;
}
div:before {
  position: absolute;
  content: '';
  height: 50%;
  width: 110%;
  top: -35%;
  left: -5%;
  background: white;
  border-radius: 50%;
  box-shadow: 0px 360px 0px 0px white;
}
div:after {
  position: absolute;
  content: '';
  width: 50%;
  height: 110%;
  left: -35%;
  top: -5%;
  background: white;
  border-radius: 50%;
  box-shadow: 360px 0px 0px 0px white;
}

<div></div>