凹边的半径是可能的吗？
这是一个简单的凸示例。
http://jsfiddle.net/swY5k/
#test{ width: 200px; height: 200px; background: #888888; border-radius: 50px; } 不过，我想要一个凹形的边框半径。
我试图使边界半径为负，但这是行不通的。
凹/凸示例：
您可以使用背景上的放射渐变给出凹面边框的印象。 例如，像这样的东西：
#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浏览器仍然需要径向渐变的前缀，如果您想完全支持旧浏览器，则可能还需要实现较早的渐变语法。
巧妙地使用:before和:after伪类，我们可以模拟一个凹forms：
#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; }
#test div是一个普通的矩形。 但是:before和:after元素是半边凹的背景色（在这种情况下是白色）。
看到这个jsfiddle 。
要生成形状，可以使用伪元素
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>
我build议在border-image使用border-image和可缩放的SVG图像。
这样你可以有任何你想要的边界形状; 不需要限制border-radius提供的形状，也不需要做任何聪明的黑客或额外的标记。
反过来说，旧版浏览器（即旧版本的IE）不支持border-image和SVG。 但是，当然， border-radius也不是这样，所以用这种技术你不会失去很多，相比之下你获得的灵活性。
SVG是build立这种形状的推荐方法。 它提供简单和可扩展性。
我们可以使用SVG的path元素创build一个像上面的形状，并用一些纯色，渐变或图案填充它。
只有一个属性d用于定义path元素中的形状。 这个属性本身包含许多简短的命令和很less的参数，这些命令是必须的。
以下代码将创build一个凸形：
<path d="M 150,25 Q 115,100 150,175 Q 185,100 150,25" />
下面的一个会创build一个凹形：
<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>
