对侧边框半径

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+'%';  
}

Run Code Online (Sandbox Code Playgroud)

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

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

不做额外的元素？

更新：

正如 GabyakaG.Petrioli 评论的那样，这可能是一个解决方案，有了它我就成功了一半：

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+'%';  
}

Run Code Online (Sandbox Code Playgroud)

.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%;
}

Run Code Online (Sandbox Code Playgroud)

同样在这里我找到了答案和解决方案，但我仍然有一些余地或其他东西：

<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>

Run Code Online (Sandbox Code Playgroud)

*{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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Har*_*rry 2

不，目前 CSS 中还没有内嵌或反向边框半径。但创建这种形状的方法有很多。我已经在其他线程中回答了您的radial-gradient问题，但认为这是一个足够好的形状问题，可以独立存在，因此在这里给出了详细的答案，以及创建此形状的所有不同可能方法。

使用径向渐变：

只是为了其他人的利益而添加在这里。这是重复，但使答案完整。我们可以使用使用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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

使用 SVG：

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

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

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

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

/* just for demo */

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

使用剪辑路径：

这与纯 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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

使用面罩：

目前仅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; }
Run Code Online (Sandbox Code Playgroud)
<div class='mask'></div>
Run Code Online (Sandbox Code Playgroud)

使用伪元素和盒子阴影：

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

它涉及将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; }
Run Code Online (Sandbox Code Playgroud)
<div></div>
Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，8 月前
查看次数：	2437 次
最近记录：	9 年，8 月前