CSS3：边框属性

前言

学习这些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

[2] CSS 边框：http://www.w3school.com.cn/css/css_border.asp