《响应式Web设计：HTML5和CSS3实践指南》——2.13节基于边框半径的圆角实现

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第2章，第2.13节基于边框半径的圆角实现，作者（美）　Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

2.13　基于边框半径的圆角实现
在网页设计的世界中，弧形圆角一度被看做圣杯（Holy Grail）。它永远都是存在的，但是却很难实现。对于如何使得元素拥有弧形圆角，设计者们往往只能在有限且拙劣的方法中选择。

2.13.1　准备工作
在CSS3的世界里，这些烦恼都不复存在。通过设置border-radius属性这样简单的方法便能给元素创建圆角特效。

2.13.2　实现方式
首先创建一个HTML元素。该方法对于含有边框的元素均能生效。因此可以创建一个带有边框的文本段落，然后从http://lipsum.com获取一些填充文本。

用百分比设置圆弧半径是达到同样效果的另外一种实现方式。回到本方法中的第一个示例，改变CSS设置，用百分比取代之前的圆弧半径值：

2.13.3　工作原理
属性border-radius提供了简易的绘制弧形元素的功能。该属性需要四个值，但是简写格式只需一个弧度值。