CSS3 边框

在开始CSS3的边框之前，先来复习一下基础的边框内容。

CSS1和CSS2的边框

CSS1和CSS2边框属性很少，只有三个属性：

• border-width  设置元素边框的粗细
• border-color  设置元素边框的颜色
• border-style  设置元素边框的类型

实际中都是采取 border: border-width border-color border-style；的简写方式一次性设定边框，如果需要单独设置，也遵循TRBL原则用 border-top-width之类来单独设置某一边。

简写方式中属性的顺序没有要求，但是一定要有border-style，否则边框等于没有设置。

三个属性里唯一要说的就是 border-style属性：

虽然边框属性都被浏览器支持，但是要注意的是double, dotted, dashed, inset, 和outset 的外观在不同浏览器内可能表现不一致。

CSS3边框属性

CSS3的边框属性有四个：

• border-color  受制于浏览器兼容性，很少会用该属性
• border-image  浏览器支持强度高一些，但只在一些炫技的页面中使用
• border-radius  浏览器广泛支持
• box-shadow  浏览器广泛支持

下边来单独看一下这四个属性。

border-color

border-color是CSS1的属性，在CSS3中为了增强这个属性，提出了一套增强的边框颜色属性。

为了避免和border-color冲突，CSS3规范要求单独针对TBRL进行设置：

• border-top-colors: color1, color2, color3, color4...
• border-bottom-colors: color1, color2, color3, color4...
• border-right-colors: color1, color2, color3, color4...
• border-left-colors: color1, color2, color3, color4...

注意一定是colors，然后可以设置n种颜色作为一个序列，如果边框有n像素宽，就会每1像素显示其中一种颜色，最后剩余的部分给最后一个颜色。

目前仅有Firefox支持，在Chrome上试验了一下还没有得到支持。

border-image

顾名思义，这个是用图片作为边框。其工作原理是，指定一张图片，然后指定一个像素，按照这个像素从图片的四角往中心数像素，然后切成9份，去掉四角和中央的部分，留下的上下左右四边，就是四个方向的边框。看一下具体写法：

border-image: url(code/chapter-3/border2.png) 12 15% 22 25% strctch round;

绿色部分是URL，用于指定图片的位置。

橙色部分是关键，这里可以传入1-4个数值或百分号，表示法与TRBL一样。如果是数字，就表示像素，如果是百分号，就表示比例，分别表示从图片顶部，右边，下边，左边切的距离或者比例。

蓝色部分可以传入1-2个值，传入1个表示控制四边，传入2个表示控制上下和左右。值的选择范围是round：表示平铺背景图片；stretch：表示拉伸图片；repeat：表示重复背景图片。

从border-image的浏览器支持可以看到，基本都支持了。这个属性可以做出来一些很好的特效，比如用来实现变化的边框和简单的实现滑动门特效。

border-radius

这个属性用于快速制作出圆角效果，写法是：

border-radius: length {1,4}

橙色部分可以传入1-4个像素数值或者百分比。也是按照TRBL标准，只不过是从左上角起算。

如果要对四角进行单独控制，需要用到下边的语句：

• border-top-left-radius: 30px 15px
• border-top-right-radius: 20px
• border-bottom-right-radius: 10% 30px
• border-bottom-left-radius: 20px 20px

这其中的值可以是1-2个像素值或者比例，如果二者相等，则就是一个以值为半径的圆的圆角，如果二者不等，则就是一个不规则的圆角。也可以只传一个参数，就表示二者相等。

圆角的特效配合其他CSS元素可以做出很多方便的图形供使用，而不用去加载背景图片，下边是一些例子：

制作圆形：

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
}

制作四个方向的半圆：

    .semicircle {
      background-color: orange;
      margin: 30px;
    }
    .top {
      width: 100px;
      height: 50px;
      border-radius: 50px 50px 0 0;
    }
    .right {
      height: 100px;
      width: 50px;
      border-radius: 0 50px 50px 0;
    }
    .bottom {
      width: 100px;
      height: 50px;
      border-radius: 0 0 50px 50px;
    }
    .left {
      width: 50px;
      height: 100px;
      border-radius: 50px 0 0 50px;
    }

box-shadow

这个属性用于给盒子添加阴影，先来看一下写法

box-shadow: inset 4px 4px 4px 4px blue

第一个参数是inset，也可以不加。不加就是默认，表示外阴影投影方式，加上表示内阴影

红色部分的两个参数是水平偏移量和垂直偏移量，正数表示在右侧和下侧，用像素值表示，如果小于0则表示左侧和上侧

黄色部分的两个参数分别表示模糊半径和扩展半径，第一个参数只能为正值，越大阴影越模糊；第二个参数可以为正负值，正值表示整个阴影扩大，负值表示缩小。

蓝色部分的参数表示颜色，即阴影的颜色。注意不要省略该参数，因为有时候浏览器会用透明色来渲染，导致阴影无效。

box-shadow还支持多个阴影混合，从上边可知，一组阴影用6个参数来表示（不含inset）则是五个，用逗号分隔多组阴影即可同时显示多个阴影。