反向邊界半徑

Question

我想要相反的邊界半徑，這樣笑臉會很難過。

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/

Answer 1

一種簡單的方法-無需修改邊界半徑屬性-只需將其旋轉180度即可：

-webkit-transform: rotate(180deg);

jsFiddle演示 -完全按照您的要求進行。

---

或者，您可以只反轉邊界半徑。

jsFiddle證明了這一點。

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

您還需要刪除border-top: 0; ，並設置border-bottom:0 。

Answer 2

你的意思是把半徑向外？ 你不能那樣做。 只需反轉半徑，然后使用頂部邊框而不是底部邊框即可。