边界半径CSS属性曲线外

时间:2012-05-11 04:26:30

标签: css css3

如何在外面设置边界半径曲线?

enter image description here

边界半径的底边想要向外弯曲。如何使用CSS3?

2 个答案:

答案 0 :(得分:8)

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

<强> 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/

答案 1 :(得分:2)

如何像这样使边界半径曲线向外?

enter image description here