1

我想要对面的边界半径，这样笑脸就会悲伤。

div.smile {
    width: 200px;
    height: 70px;
    border: 10px solid #222;
    border-top: 0;
    background: rgba(0,0,0,0);
    -moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
    -webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
    border-radius: 0 0 120px 120px / 0 0 90px 90px;
    position: absolute;
    bottom: 50px;
    left: 38px;
    box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
    }

这是小提琴链接：

http://jsfiddle.net/mayoung/2qBLF/

4

2 回答 2

2

一种简单的方法 - 无需修改边框半径属性 - 只需将其旋转 180 度：

-webkit-transform: rotate(180deg);

jsFiddle 演示- 看起来完全符合您的要求。

或者，您可以反转边界半径..

jsFiddle证明了..

border-radius: 120px 120px 0 0 / 90px 90px 0 0;

您还需要删除border-top: 0;和设置border-bottom:0。

于 2013-10-04T23:24:34.443 回答
0

你的意思是把半径向外转？你不能那样做。只需反转半径并使用顶部边框而不是底部边框。

于 2013-10-04T23:38:45.500 回答