凹形边界半径是否可能？

Question

这是一个简单的凸示例。

http://jsfiddle.net/swY5k/

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

但是，我想要一个凹形边框半径。

我尝试将边界半径设为负值，但这不起作用。

凹/凸示例：

Answer 1

您可以在背景上使用径向渐变来给人一种凹形边框的印象。例如，像这样：

#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 浏览器仍然需要径向渐变前缀，如果您想完全支持旧版浏览器，您可能还需要实现旧版渐变语法。

Answer 2

巧妙地使用:before和:after伪类，我们可以模拟一个凹形：

    #test{
        width: 100px;
        height: 300px;
        background: green;
        position: relative;
        display: inline-block;
    }
    
    #test:before{
        background: white;
        height: 300px;
        width: 30px;
        border-radius: 0 60px 60px 0 / 0 300px 300px 0;
        display: inline-block;
        content: '';
    }
    
    #test:after{
        background: white;
        height: 300px;
        width: 30px;
        border-radius: 60px 0 0 60px / 300px 0 0  300px;
        display: inline-block;
        content: '';
        position: relative;
        left: 40px;
    }

<div id="test"></div>

#test div 是一个普通的矩形。但它的:before 和:after 元素是用背景颜色填充的半边凹面（本例中为白色）。

见this jsfiddle。

Answer 3

SVG 是创建此类形状的推荐方法。它提供了简单性和可扩展性。

我们可以使用SVG的路径元素来创建一个像上面这样的形状，并用一些纯色、渐变或图案填充它。

d 元素中只有一个属性 d 用于定义形状。该属性本身包含一些简短的命令和一些使这些命令起作用所必需的参数。

以下代码将创建一个凸形：

<path d="M 150,25
         Q 115,100 150,175
         Q 185,100 150,25" />

下面的会创建一个凹形：

<path d="M 30,25
         L 80,25
         Q 50,100 80,175
         L 30,175
         Q 60,100 30,25" />

以下是上述代码中使用的path命令的简要说明：

• M 命令用于定义起点。它出现在开头并指定绘图的起点。
• L 命令用于绘制直线。
• Q 命令用于绘制曲线。

输出图像：

工作演示：

<svg width="300" height="200" viewBox="0 0 300 200">
  <defs>
    <linearGradient id="grad">
      <stop offset="0" stop-color="#ddd" />
      <stop offset=".5" stop-color="#fff" />
      <stop offset="1" stop-color="#ddd" />
    </linearGradient>
  </defs>
  <g stroke-width="1" stroke="#000" fill="url(#grad)">
    <path d="M30,25 L80,25 Q50,100 80,175 L30,175 Q60,100 30,25" />
    <path d="M150,25 Q115,100 150,175 Q185,100 150,25" />
  </g>
</svg>

有用的资源：

以下是一些有用的 SVG 链接：

• Specification
• MDN

Answer 4

要生成形状，可以使用伪元素

div {
  height: 250px;
  width: 100px;
  background: tomato;
  position: relative;
  margin:0 auto;
}
div:before {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  background: white;
  border-radius: 50%;
  left: -25%;
  transition: all 0.8s;
}
div:after {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  background: white;
  border-radius: 50%;
  right: -25%;
  transition: all 0.8s;
}
div:hover:before,
div:hover:after {
  background: blue;
}

hover the shape to see how it works:
<div></div>

Answer 5

我建议使用border-image，边框带有可缩放的 SVG 图像。

这样你就可以在边框中有任何你想要的形状；无需受限于border-radius 提供的形状，也无需做任何巧妙的修改或额外的标记。

缺点是在旧浏览器（即旧 IE 版本）中既不支持 border-image 也不支持 SVG。但当然，border-radius 也不是，因此与您获得的灵活性相比，使用此技术不会损失太多。

Answer 6

有几种方法可以制作凹形边框。而且我更喜欢在背景上使用径向渐变。 https://jsfiddle.net/black_horse/qygmb8z9/

Sample Picture

.single-border{
  height: 50px;
  padding: 20px;
  background:-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 21px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background-position:left bottom, right bottom, right top, left top;
    -moz-background-size:51% 51%;
    -webkit-background-size:51% 51%;
    background-size:51% 51%;
    background-repeat:no-repeat;
}


<div class="single-border">
  Single border
</div>