CSS3 倒圓角是一種新穎的 CSS 技術(shù)，通過它我們可以實(shí)現(xiàn)更為復(fù)雜的圓角效果。這里介紹一種通過使用 CSS3 的 border-radius 和 transform 倒置組合實(shí)現(xiàn)倒圓角效果的方法。

/*使用 border-radius 和 transform 屬性實(shí)現(xiàn)倒圓角*/
.rounded-corner {
border-radius: 50px 50px 0 0;
transform: skew(20deg);
}

代碼中，我們先設(shè)置一個(gè) border-radius 值，該值分別設(shè)為 50px 50px 0 0，表示左右兩側(cè)的圓角半徑為 50px，上下兩側(cè)不設(shè)圓角。接著，我們將元素傾斜 20 度（注意旋轉(zhuǎn)方向），通過 transform 屬性的 skew() 方法實(shí)現(xiàn)，使其看起來像是“上下倒轉(zhuǎn)”。這樣，上方的直角就變成了下方的倒圓角。

稍加改動(dòng)，我們還可以實(shí)現(xiàn)其他的倒圓角方向。例如，將 border-radius 屬性的值改為 0 0 50px 50px，即可實(shí)現(xiàn)下側(cè)倒圓角。代碼如下：

/*下方倒圓角*/
.rounded-corner {
border-radius: 0 0 50px 50px;
transform: skew(-20deg);
}

還可以將 border-radius 的值修改，實(shí)現(xiàn)更加獨(dú)特的倒圓角效果。試著修改上方代碼中的 border-radius 的值，看看這個(gè)有趣的 CSS 技術(shù)會(huì)給你帶來什么驚喜吧！