《响应式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提供了简易的绘制弧形元素的功能。该属性需要四个值，但是简写格式只需一个弧度值。

css内凹圆角 border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。4个角（顺时针方向，左上，右上，右下，左下），每个角都有两个半径，水平半径和垂直半径，
脑洞大开：如何使用CSS实现自定义圆角虚线框 在CSS中，我们常用`border`来表示一个元素的边框样式，也可以使用`border`来绘制简单的分割线。最近遇到一个项目，需要用虚线来显示元素的边框。初步一看，这不很简单嘛，一行代码搞定`border: 1px dashed #ccc`。自我感觉良好，结果UI的同事直接提刀来了，“这是我想要的效果吗，我要的是……”。没办法，还是老老实实想办法解决自定义的虚线边框。
巧用css圆角实现有点意思的加载动画 作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画.