圓角矩形效果語法border-radius:12px;
聰明的你,是否已想到了舉一反三的?我們只給某一個角定義圓弧效果?是啦,下面我們來看看其它的一些圓弧效果:
單個角度圓弧果語法
border-top-left-radius:6px;
對角圓弧,弧度大小不同的效果語法
border-top-left-radius:6px;
border-top-right-radius:12px;
我們對四個角可以同時設置1到4個值。如果設置1個值,表示4個圓角都使用這個值。如果設置兩個值,表示左上角和右下角使用第一個值,右上角和左下角使用第二個值。如果設置三個值,表示左上角使用第一個值,右上角和左下角使用第二個值,右下角使用第三個值。如果設置四個值,則依次對應左上角、右上角、右下角、左下角(順時針順序)。根據上述的效果,你是否會腦洞大開,如果我們定義圓,是否可以用這個方法,答案是肯定的。我們在寫圓的代碼時,也是這樣定義的。只需要把
borde-radius:50%;