前言
学习这些CSS属性并不是要自己要设计多好看的样式，而是看到网上的代码能看得懂。
效果
本章将围绕如下效果进行解释：
border
- border-width: 边框宽度。
- border-style: 边框样式。
- border-color: 边框的颜色，当设为 transparent 时表示透明。
- 一起设置：border: <width> <style> <color>
outline
- 轮廓属性，不占空间，位于边框的外部。
- outline-width: 轮廓的宽度。
- outline-style: 轮廓的样式。
- outline-color: 轮廓的颜色。
- 一起设置：outline: <width> <style> <color>
- outline-offset: 轮廓的偏移。
- 查看"图b5"，该图形既添加了border属性又添加了outline属性，实现了双边框效果。
border-radius(边框半径)
- border-top-left-radius: 左上角边框。
- border-top-right-radius: 右上角边框。
- border-bottom-right-radius: 右下角边框。
- border-bottom-left-radius: 左下角边框。
- 一起设置：border-radius:<top-left> <top-right> <bottom-right> <bottom-left>
- 浏览器兼容：加上-webkit-或-moz-
- 每个圆角可以 分别设置水平半径和垂直半径
- border-radius:<水平半径> / <垂直半径>
- border-*-radius: <水平半径> <垂直半径>
- 图"b1"使用border-radius属性一次性对4个角设置了不同的半径。
- 图"b2"对每个角设置了不同的水平半径和垂直半径。
- 图"b3"通过设置border-radius:50%画出了一个圆形。
- 图"b4"使用border-radius画出了一个“柠檬形状”。
- 图"b8"画出了当width和height为0时border的状态。
box-shadow(阴影)
- box-shadow:<h-shadow> <v-shadow> <blur> <spread> <color> [inset]
- h-shadow: 水平偏移。
- v-shadow: 垂直偏移。
- blur: 模糊距离。如果不设置此值，则阴影不会模糊。
- spread：阴影扩张的尺寸。
- color: 阴影颜色。
- inset: 内部阴影。默认值是outset，表示外部阴影。
- 图"b6"实现了模糊阴影。
- 图"b7"利用box-shadow实现了多层边框。
参考文献
[1] 重温CSS:Border属性：http://www.cnblogs.com/yanhaijing/p/3527259.html