天蠶網(wǎng)站建設編緝語(yǔ)：我們在給矩形的四角進(jìn)行圓角處理時(shí)，我們早期，都是采用片圖來(lái)完成，這無(wú)疑是給網(wǎng)頁(yè)的加載增加了負擔，大量的圖片載入在網(wǎng)頁(yè)里，流量消耗，對手機用戶(hù)是一刺痛的。給網(wǎng)頁(yè)及APP的加載速度，無(wú)疑是我們一直研究的方向。下面我們來(lái)們看看，如何給矩形圓角下處理，使其達到我們的預期效果，又少用JPG等圖片元素。

首先，會(huì )CSS的朋友，需要注意到CSS里的border-radius屬性，（英語(yǔ)方面的大咖小咖們，都注意到了radius翻譯是“半徑”，border是指邊沿、邊界、鑲邊。border-radius意思為“邊框半徑”）所以我們對它的定義，只需要給個(gè)值就可以了。詳細見(jiàn)下面的例子：

聰明的你，是否已想到了舉一反三的？我們只給某一個(gè)角定義圓弧效果？是啦，下面我們來(lái)看看其它的一些圓弧效果：

天蠶軟件開(kāi)發(fā)公司編者語(yǔ)：我們對四個(gè)角可以同時(shí)設置1到4個(gè)值。如果設置1個(gè)值，表示4個(gè)圓角都使用這個(gè)值。如果設置兩個(gè)值，表示左上角和右下角使用第一個(gè)值，右上角和左下角使用第二個(gè)值。如果設置三個(gè)值，表示左上角使用第一個(gè)值，右上角和左下角使用第二個(gè)值，右下角使用第三個(gè)值。如果設置四個(gè)值，則依次對應左上角、右上角、右下角、左下角（順時(shí)針順序）。

根據上述的效果，你是否會(huì )腦洞大開(kāi)，如果我們定義圓，是否可以用這個(gè)方法，答案是肯定的。我們在寫(xiě)圓的代碼時(shí)，也是這樣定義的。

只需要把 borde-radius:50%;  

天蠶網(wǎng)站建設公司總結：CSS越來(lái)越強大，它對圖形及色彩的控制越來(lái)越強大，我們除了可以通過(guò)CSS代碼繪制圖形，同時(shí)也可以為它著(zhù)色，不是單純的填充單色哦，而漸變等多種效果的色彩，我們將在下一次的章節里介紹CSS繪制三角形及其它圖形效果。