CSS—轮廓

---

边框轮廓的设置涉及很多浏览器兼容性的问题，特别是CSS3带来了很多新的特效，但是CSS3带来的浏览器兼容就不仅仅是我之前每次想到的IE6、7啦，也包括IE的更高版本，还有火狐啊，欧朋啊，谷歌啊，苹果啊，这类现代浏览器，所以对于css3的新特性还是慎用比较好。

• border
  定义边框：
  border：1px solid red;
  /设置边框为红色，宽度为1px、样式为实线/
• outline
  定义轮廓：
  格式为:outline:style style width;
  outline: blue inset 20px;
  /设置蓝色的，宽度为20px、样式为3D凸边的轮廓/

以下是边框轮廓的样式：
solid 定义实线
none 默认。定义无。
dotted 定义点状。这个值在浏览器中表现各异，注意使用
dashed 定义虚线。
double 定义双线。
groove 定义 3D 凹槽。
ridge 定义 3D 凸槽。
inset 定义 3D 凹边。
outset 定义 3D 凸边。

以上是css3以前对于边框的一些修饰。兼容性还很好。
一下是css3的一些新特效，使用时注意兼容性：

• border-radius圆角
  浏览器兼容性：IE9+、Firefox 4+(2011年3月)、Chrome、Safari 5+ 以及 Opera 支持 。
  使用方法：border-radius:25px;同时为了兼容老版本的火狐浏览器，W3C提出这样的写法：-moz-border-radius: 25px;，但是依旧不支持IE8及以前。
  更多效果，参考W3C进行测试
• border-shadow阴影
  浏览器兼容性：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 。
  格式：box-shadow: h-shadow v-shadow blur spread color inset;
  box-shadow:20px 10px 5px 1px #000000 inset;
  -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
  h-shadow 为水平阴影的位置。
  v-shadow 为垂直阴影的位置。
  以上两个为必填项
  blur 模糊距离。
  spread 阴影的尺寸。
  color 阴影的颜色。
  inset 将外部阴影 (outset) 改为内部阴影。
  更多效果，参考W3C
• border-image图像轮廓绘制
  浏览器兼容性：Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持。同时，Safari 5 支持替代的-webkit-border-image属性。
  使用方法：
  border: 10px solid transparent;
  border-image: url(hhh.png) 75 75 75 stretch;/不要挂单位/
  顺序：border-image：source slice width outset repeat；
  解释：
  border-image 属性是一个简写属性，用于设置以下属性：
  border-image-source 用在边框的图片的路径。
  border-image-slice图片边框向内偏移。
  border-image-width图片边框的宽度。
  border-image-outset边框图像区域超出边框的量。
  border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
  更多效果，参考W3C进行测试

这篇，没图额，因为不太懂