CSS3边框样式

1.边框阴影：box-shadow（多个阴影用逗号隔开）

• 语法：box-shadow : x-offset y-offset blur spread color style
  • x-offset：是左右方向 取值范围：正负
  • y-offset：是上下方向 取值范围：正负
  • blur：阴影模糊的半径 取值范围：只能是正
  • spread：定义阴影大小
  • color：定义阴影颜色
  • style：定义是外阴影还是内阴影
    • outset外阴影（默认值）
    • inset内阴影

2.多色边框：border-colors

• 语法：
  • border-top-colors：取值
  • border-bottom-colors：取值
  • border-left-colors：取值
  • border-right-colors：取值
• 注意：
  • border-colors的兼容性很差，暂时只有Firefox浏览器支持
  • 不能使用-moz-border-colors属性为4条边同时设定颜色，必须按照上面的语法去定义每条边的颜色
  • 如果边框宽度（即border-width）为n个像素，则该边框可以使用n种颜色，即每像素显示一种颜色（这一个技巧可以做“渐变边框”，原理就是每一像素对应一种颜色，看就来就像是“渐变色”）

3.边框背景：border-image

• 兼容性很好，所有主流浏览器最新版都支持它
• 边框除了实线（solid）、虚线（dashed）之外，还可以是图片
• 语法：border-image：url() 值1 值2 值3 值4 repeat；
  • url：图片的路径
  • 值1-值4：分别对应，上、右、下、左（顺时针） 也可以用一个值代替，表示四条边一样
  • 平铺方式：
    • repeat：表示图片会不断重复，超出元素的部分将会被裁剪掉
    • round：为了铺满整个边，它会拉伸或者压缩图片来达到目的
    • stretch：拉伸图片，边有多长就拉多长