CSS3提供了一種簡單方便的方式來畫圓角矩形,我們只需要使用border-radius屬性就可以快速的實現。
.round-corner { border-radius: 10px; }
通過這樣的代碼我們就可以把一個普通的矩形變成圓角矩形,其中10px是圓角的半徑。
如果我們需要只設置某個角的圓角,可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius屬性分別設置左上、右上、左下、右下四個角的圓角半徑。
.top-left-corner { border-top-left-radius: 10px; } .top-right-corner { border-top-right-radius: 10px; } .bottom-left-corner { border-bottom-left-radius: 10px; } .bottom-right-corner { border-bottom-right-radius: 10px; }
當然,我們也可以像下面這樣只設置兩個相鄰的角:
.top-corner { border-top-left-radius: 10px; border-top-right-radius: 10px; } .bottom-corner { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .left-corner { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .right-corner { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
通過這些簡單的代碼,我們可以快速輕松地實現不同形狀的圓角矩形效果。
上一篇css如何讓a浮動
下一篇ajax如何傳入多個參數