Question

请检查以下小提琴链接，有没有办法实现反方向曲线（反转），

.roundCorner
{
width: 170px;
height: 20px;
padding: 2em;
border: 1px solid;
border-radius: 0 0 13em 13em / 0 0 3em 3em
}

border-radius：0 0 -13em -13em / 0 0 -3em -3em 无效。谢谢！

Answer 1

根据CSS3 standard“不允许使用负值”。所以我认为任何网络浏览器都不太可能为你想要实现的目标增加支持。

您可能需要使用border-image获得自定义边框图形。有关此领域的一些提示，请参阅Understanding border-image。

Answer 2

经过一番黑客攻击，here's what I've got。

.roundCorner {
  width: 170px;
  height: 20px;
  padding: 2em;
  border: 1px solid;
  border-bottom:0;
  position:relative;
}
.roundCorner:after {
  position:absolute;
  left:-1px;right:-1px;bottom:0;
  height:1.5em;
  border:1px solid black;
  border-bottom:0;
  border-radius: 13em 13em 0 0 / 3em 3em 0 0;
  content:'';
}

基本上它使用伪元素来生成元素的下边框。这是hax，但似乎有效。

Answer 3

您可以通过使用：before伪选择器添加元素，然后对该元素应用圆角边框来伪造它。例如类似的东西：

http://jsfiddle.net/gkghc/

.roundCorner
{
    width: 170px;
    height: 20px;
    padding: 20px;
    border: 1px solid;
    border-bottom: 0;
    position: relative;
}

.roundCorner:before {
    content: "";
    display: block;
    width: 170px;
    height: 10px;
    padding: 20px;
    border-top: 1px solid black;
    border-radius: 13em 13em 0 0 / 3em 3em 0 0;
    position: absolute;
    left: 0px;
    top: 30px;
}

是否有相反方向（反转）曲线的可能性？

3 个答案: