图解CSS3 读书笔记——边框

CSS的边框

属性：border-style、border-width、border-color

写法：
分开写：E {border-style: solid;border-width: 1px;border-color: alicebule;}
合并写：E {border: 1px solid alicebule;}

注意：

• border-style是必须属性，其他顺序可以打乱写

• 如果设定 border：none，浏览器自动解析为border-style：none

• 边框大小即border-width默认为medium

css3新增：
border-color、border-image、border-radius

CSS3：border-color

在css2中，我们可以运用border-color属性给元素的边框整体或者每一条边框上色，但是每条边框最多只能使用一种颜色。

而css3改进的border-color属性为我们提供了同一条边框设置多种颜色（比如说给边框添加一个渐变色，或者说一个彩色）的途径。不过到目前为止只有Firefox 3.0+的浏览支持这个属性。也是因为这一点，css3的border-color应用是相当的少。

上文提到过，css3border-color只有FF支持，故运用或测试时我们需要加上-moz-前缀。

用法：

.box{
    border：5px solid transparent;
    -moz-border-top-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-right-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-bottom-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-left-colors：<color1> <color2> <color3> <color4> <color5>;
}

我们这时给每一条边框都设置了5种颜色，且都占据着5px的宽度。这个时候每种颜色的border-width为1px。事实上，如果我们边框设置了x个像素的宽度，并且为每条边框设置了y种颜色，若x>y，则前y-1种颜色每种占据了1px，最后一种颜色占据x-y+1个像素。

实例：立体渐变效果

.box {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

效果:

CSS3：border-radius

border-radius相信很多前端ers都很熟悉了，就是元素圆角效果。这个属性兼容了ie9+以及其他主流现代浏览器。

基本写法：

• 设置统一半径的圆角：border-radius：<length>

• 设置多个半径的圆角： border-radius：<top-left> <top-right> <bottom-right> <bottom-left>

• 设置水平垂直半径不统一的圆角：border-radius：<horizontal-length> / <vertical-length>

• 分开设置：

  border-top-left-radius:<length> / <length>
  border-top-right-radius:<length> / <length>
  border-bottom-left-radius:<length> / <length>
  border-bottom-left-radius:<length> / <length>

  为兼容其他老版本的的浏览器，需要为其加上前缀，并且写法有点区别：

  FF：-moz-border-radius-topleft
  Chrome：-webkit-border-top-left-radius

  图解CSS3中提到webkit内核浏览器下图片没有圆角效果，经过测试（基于当前本人的chrome 44+的版本）webkit内核较新版本的浏览器已经修正了这个问题。如下图

Chrome下：

FF下：

border-radius还可以做出如圆、半圆、四分之一圆、椭圆的效果：

• 圆：

  .box {

     height: 100px;     
     width: 100px;     
     border-radius:100px;/*或者50%*/     
     background: aliceblue;     margin: 20px; 

  }

• 半圆：

  .box {

     height: 100px;
     width: 50px;
     border-radius: 50px 0 0 50px;/*分表表示左上角 右上角 右下角 左下角*/
     background: aliceblue;

  }

• 四分之一圆：

  .box {

     height: 100px;
     width: 50px;
     border-radius: 50px 0 0 0;/*分表表示左上角 右上角 右下角 左下角*/
     background: aliceblue;

  }

• 椭圆：

  .box {

     height: 100px;
     width: 50px;
     border-radius: 25px / 50px;/*分表表示水平半径 垂直半径。或者50% / 50%;*/
     background: aliceblue;

  }

CSS3：border-image

border-image属性用以给任何元素（除border-collapse属性为collapse的table元素）设置图片效果边框，可以用来制作圆角按钮效果，渐变tabs效果等。border-image允许你使用一张小图片，并且将它分割成九个小部分， 然通过延伸这个小部分使其构成一个更大的元素。

注意 ie并不支持border-image

写法：

border-image: url top right bottom left x-repeat y-repeat

• url：采用的图片的路径

• top,right,bottom,left：图片的切割方法，注意是不需要加单位的（加了会失效）。默认是px，但可以使用百分比

如图：

图片切割方式：
这里通过两个实例来说明图片切割方式：

通过切割左边的小图片，使其延展+拼接成右边的大图。
若是我们进行如下的分割：

这样图片的切割长度分别为：0（上） 30（右） 0（下） 30（左）
现在的情况就等于用4、6两块小图进行拼接和延伸:

很容易发现，只要我们在水平和垂直方向进行延展就会达成效果图的样子了。

如果图片切割成这样：

就会发现实际效果中，会多出上下边框的宽度。其他没有变化。

图片铺排方式：

左图水平和垂直方向都是stretch，右图水平是stretch，垂直是round

图一水平和垂直均为round，图二水平和垂直均为stretch，图三均为repeat

参考文章：Click

CSS3：box-shadow

box-shadow用来定义元素的盒子阴影。
IE8及以前的浏览器不支持box-shadow

用法：

border-shadow: 阴影类型 水平位移 垂直位移 模糊半径 阴影扩展半径 颜色

• 阴影类型默认为： 外阴影，可设定唯一值：inset

• 水平位移：x-offset。可取正负值，正值阴影在元素右方。

• 垂直位移：y-offset。可取正负值，正值阴影在元素下方。

• 模糊半径：值只能为正，取值越大，阴影边缘越模糊。

• 阴影扩展半径：可取正负值。若无模糊半径，设置了扩展半径和为元素设置边框的效果一致。

多层阴影：
box-shadow可以多层阴影同时使用，每层阴影之间使用“，”隔开。设置在最前的阴影将显示在最顶层，所以一定要注意阴影的大小取值。
若阴影的设置为：0 0 0 20px lime, 0 0 0 10px yellow, 0 0 0 8px green
则这时第一层阴影的扩展半径为20，显示在最顶层；第二层阴影显示在第一层阴影之下，此时因为第一层阴影的扩展半径>第二层阴影的扩展半径，所以第一层阴影会把第二层阴影覆盖掉。

<End>