一、CSS3-边框

1 CSS

  CSS（Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观（如网页的样式、布局等等）的声明式语言。浏览器会根据CSS的样式定义将其选定的元素显示为恰当的形式。一条CSS的样式定义包括属性和属性值，他们共同决定网页的外观。
  CSS可以用于给文档添加样式——比如改变标题和链接的颜色和大小。它也可用于创建布局——比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边区域的布局。它甚至还可以用来做一些特效，比如动画。
  一条CSS规则包含一个选择符和一组属性定义。下面这个例子用来将页面中的所有p标签显示为黑色背景和黄色文本。
eg.

选择符{
	属性: 值;
}

/* p 选择符用来选择页面中的所有<p>标签 */
p {
	/* color 属性用来定义文本颜色，值这里为黄色 */
	color: yellow;
	/* background-color 属性用来定义元素的背景色，值这里为黑色 */
	background-color: black;
}

  CSS中的C表示“层叠的”，意为多个选择符之间具有特定的优先级。这一点非常重要，因为复杂网站可能会有非常多的CSS规则，因此必须规定好这些规则的优先级，以免乱套。

• border-radius 添加圆角元素
• box-shadow 添加阴影(合理利用，可以增加立体视觉)
• border-image

1 添加圆角元素（border-radius）

button{
	border: 2px solid #a1a1a1; /*2像素边界，其中solid表示边框实线，边框颜色#a1a1a1*/
	border-radius: 25; /*圆角半径*/
}

2 添加阴影（box-shadow）

  阴影模糊半径是以元素边界四周扩散半径，如果x轴和y轴偏移量都0，根据半径四周扩散阴影，阴影无偏移。

  box-shadow: 0px 0px 20px green;

  box-shadow: 20px 0px 20px green;

  box-shadow: 20px 20px 20px green;

button{
	/*    阴影x偏移量 | 阴影y偏移量 | 阴影模糊半径 | 阴影颜色  */
	box-shadow: 10px 10px 10px black;
}

2.1 取值

2.1.1 inset

  如果没有指定inset，默认阴影在边框外，即阴影向外扩散。
  使用inset关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。

2.1.2 offset-x offset-y

  这是头两个 ength 值，用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的，只不过y垂直方向向下。 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。可用单位请查看 。
  如果两者都是0，那么阴影位于元素后面。这时如果设置了 或 则有模糊效果。需要考虑 inset 。

2.1.3 blur-radius

  这是第三个 length值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。本规范不包括如何计算模糊半径的精确算法，但是，它详细说明如下：
  对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。

2.1.4 spread-radius

这是第四个 length 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。

参考1：CSS box-shadow 属性用于在元素的框架上添加阴影效果。
参考2：CSS基础教程
参考3：CSS教程