Border-radius CSS 属性曲线外答案

【问题标题】：Border-radius CSS property curve outsideBorder-radius CSS 属性曲线外
【发布时间】：2022-01-25 15:16:31
【问题描述】：

如何使边界半径曲线向外？

边界半径要向外弯曲的底边。如何用 CSS3 做到这一点？

【问题讨论】：

这在没有额外标记的情况下是不可能的，因为部分图形在盒子模型之外。

标签： css

【解决方案1】：

是的，您可以在没有任何额外标记的情况下执行此操作。像这样写：

CSS

.active{
    border:1px solid red;
    border-bottom:0;
    width:80px;
    height:40px;
    margin:30px;
    position:relative;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
.active:after,
.active:before{
    content:'';
    width:40px;
    height:30px;
    border:1px solid red;
    position:absolute;
    bottom:-3px;
    border-top:0;
}
.active:after{
    border-left:0;
    -moz-border-radius:0 0 5px 0;
    -webkit-border-radius:0 0 5px 0;
    border-radius: 0 0 5px 0;
    left:-41px;
}
.active:before{
    border-right:0;
    -moz-border-radius:0 0 0 5px;
    -webkit-border-radius:0 0 0 5px;
    border-radius: 0 0 0 5px;
    right:-41px;
}

HTML

<div class="active">hi</div>

查看http://jsfiddle.net/p6sGJ/

【讨论】：

您忘记添加“真实”border-radius 属性。我们不想再这样疯狂了：remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south
这很好，但我只是举一个支持 -webkit 和 mozilla 浏览器的例子 :)
是的，但问题是有人可能只是复制粘贴您的代码，而这可能就是问题一开始的原因。因此，我只是对您的答案进行了快速编辑，顺便说一下，这是一个很好的解决方案，因此我们可以尽量避免这种情况。