天蚕网站建设编缉语：我们在给矩形的四角进行圆角处理时，我们早期，都是采用片图来完成，这无疑是给网页的加载增加了负担，大量的图片载入在网页里，流量消耗，对手机用户是一刺痛的。给网页及APP的加载速度，无疑是我们一直研究的方向。下面我们来们看看，如何给矩形圆角下处理，使其达到我们的预期效果，又少用JPG等图片元素。

首先，会CSS的朋友，需要注意到CSS里的border-radius属性，（英语方面的大咖小咖们，都注意到了radius翻译是“半径”，border是指边沿、边界、镶边。border-radius意思为“边框半径”）所以我们对它的定义，只需要给个值就可以了。详细见下面的例子：

聪明的你，是否已想到了举一反三的？我们只给某一个角定义圆弧效果？是啦，下面我们来看看其它的一些圆弧效果：

天蚕软件开发公司编者语：我们对四个角可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

根据上述的效果，你是否会脑洞大开，如果我们定义圆，是否可以用这个方法，答案是肯定的。我们在写圆的代码时，也是这样定义的。

只需要把 borde-radius:50%;  

天蚕网站建设公司总结：CSS越来越强大，它对图形及色彩的控制越来越强大，我们除了可以通过CSS代码绘制图形，同时也可以为它着色，不是单纯的填充单色哦，而渐变等多种效果的色彩，我们将在下一次的章节里介绍CSS绘制三角形及其它图形效果。