CSS3倒圆角

好吧，这纯粹是疯狂，但是肯定有一些方法可以做到这一点:-)并非跨浏览器，而是让我们看看：

我们的加价：

<div id="bubble">    <p>This is madness!</p></div>

我们的CSS：

#bubble {    width:200px;    height:100px;    border:1px solid #000;    -webkit-border-radius:20px;    -moz-border-radius:20px;    border-radius:20px;}    #bubble p {        margin: 1em;        font-family:Comic Sans MS;    }#bubble:before {    content:'';    border:20px solid;    border-color:#fff transparent transparent;    position:absolute;    top:110px;    left:25px;    z-index:2;}#bubble:after {    content:'';    border:20px solid;    border-color:#000 transparent transparent;    position:absolute;    top:111px;    left:25px;    z-index:1;}

我只在Firefox 3.6.3中进行了测试，但思路很明确:-)

这是两个：

#bubble {    width:200px;    height:100px;    border:1px solid #000;    position:relative;    -webkit-border-radius:20px 20px 20px 0;    -moz-border-radius:20px 20px 20px 0;    border-radius:20px 20px 20px 0;}    #bubble p {        margin: 1em;        font-family:Comic Sans MS;    }#bubble:before {    content:'';    width:20px;    height:20px;    background:#fff;    border-left:1px solid #000;    position:absolute;    top:100px;    left:-1px;}#bubble:after {    content:'';    -webkit-border-radius:20px 0 0 0;    -moz-border-radius:20px 0 0 0;    border-radius:20px 0 0 0;    border:solid #000;    border-width:1px 0 0 1px;    width:20px;    height:19px;    position:absolute;    top:100px;    left:0;}

也许可以通过许多方式增强此功能：

• 使其跨浏览器（至少+ webkit和Opera）
• 不过，借助http://pre.google.com/p/ie7-js/之类的东西（为了使生成的内容能够正常工作），它可以在IE中运行而无需四舍五入。
• 了解如何在高度灵活的情况下工作。
• 更改字体系列声明:-)