CSS嵌入带有实线边框的边框半径

Question

我知道我可以使用径向渐变创建插入/倒置边框，例如：Inset border-radius with CSS3，但我想知道的是，如果我可以在生成的形状周围绘制1px的实心边框，就像在这张图片中：

我不仅希望左下半径也被边框反转，而且剩余空间内的背景颜色必须是透明的。是否可以使用CSS3和HTML（我现在对canvas或SVG不感兴趣）？

Answer 1

演示：

http://jsfiddle.net/j8gUA/1/

标记：

<figure></figure> 

风格：

figure{
    position:relative;
    width:200px;
    height:120px;
    margin:100px auto;
    overflow:hidden;
    border:1px solid black;
    border-right:none;
    border-bottom:none;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
figure:before,figure:after{
    content: '';
    position: absolute;  
}
figure:before{
    right: -50%;
    top: 0;
    background: transparent;
    width: 172px;
    height: 200px;
    border: 1px solid black;
    border-radius: 100%;
    box-shadow: 0 0 0 100em red;
}
figure:after{
    left: -1px;
    bottom: 0px;
    height: 16px;
    width: 128px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 5px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;    
}

Answer 2

根据我的经验，虽然使用CSS创建一些复杂的形状（http://css-tricks.com/examples/ShapesOfCSS/）是非常可行和值得的，但是一旦需要边框，就应该放弃这种方法并使用图像。你当然可以使用它下面的z-index形状的克隆，两个像素更宽，两个像素更高，一个像素在它上面，一个像素在左边，以及所需的边框颜色。不幸的是，总会有一些小的跨浏览器问题，尤其是四舍五入。它永远不会看起来很正确。