Border and Box effects

图片

Giving your borders rounded corners

border-radius

E { border-v-h-radius: x y; }

v可以是top 或 bottom，h可以是left 或 right。
X和Y分别是定义在X轴和Y轴上的长度，当X,Y值一样时，可只设置一个值，生成圆角；当X,Y值不一样，生成椭圆角。

/* 下面的两个规则是等价的 */
div { border-top-right-radius: 20px 20px; }
div { border-top-right-radius: 20px; }

为每一个corner变成圆角：

div {
    border-top-left-radius: 10px 20px;
    border-top-right-radius: 10px 20px;
    border-bottom-right-radius: 10px 20px;
    border-bottom-left-radius: 10px 20px;
}

上面的写法太啰嗦，可以用缩写border-radius 属性，其值从左上角开始顺时针展开。
像padding margin 一样，其值可以是一个到四个（当是圆角时）。

E { border-radius: [top-left] [top-right] [bottom-right] [bottom-left]; }

同padding和magin的处理方式，如下图，当只有一个时，会复制到每一个；当有两个值时，第一个复制到第三个，第二个复制到第四个；当有三个值时，第二个复制到第四个。

如果需要椭圆角，需要用 / 将水平和垂直半径隔开。斜线的左右分别可以有一到四个值，斜线左边分别是四个角的水平半径，斜线右边分别是四个角的垂直半径。

border-radius: { horizontal-radius / vertical-radius; }

<div class="radius-1"></div>
<div class="radius-2"></div>
<div class="radius-3"></div>

div {
    height: 200px;
    width: 100px;
    border: 1px solid;
    float: left;
    margin-left: 20px;
    border: 2px solid rgba(173, 216, 230, 1);
}
.radius-1 { border-radius: 20px / 10px; }  /* 等价于 20px 20px 20px 20px / 10px 10px 10px 10px*/
.radius-2 { border-radius: 20px / 10px 20px; } /*等价于 20px 20px 20px 20px / 10px 20px 10px 20px*/
.radius-3 { border-radius: 10px 20px 20px / 20px 10px; } /* 10px 20px 20px 20px / 20px 10px 20px 10px*/

Using percentage values

圆角半径值还可以是百分比，针对元素边长度的百分比。利用百分比，可以很容易将元素变成圆形。

还用前面的HMTL为例，修改样式如下：

div {
    height: 100px;
    width: 100px;
    border: 1px solid;
    float: left;
    margin-left: 20px;
    border: 2px solid rgba(173, 216, 230, 1);
}
.radius-1 {
    border-radius: 50%;
}
.radius-2 {
    width: 200px;
    border-radius: 50% / 50%;
}

Using images for borders

下面是一些用来设置边框背景图片的属性。

border-image-source

border-image-source 属性，指定边框背景图片。

E { border-image-source: url('foo.png'); }

border-image-slice

border-image-slice 属性切割背景图片，接受一到四个值，和padding和magin的处理方式一样(上右下左)。
其值可以是长度值或百分比，分别代表 从图片每一边向内偏移的距离。

E { border-image-slice: 34; }

注意其值不带单位，有两种单位，对于bitmap（如jpg png）其单位是px；对于vector（如SVG），其是坐标。

来看下面的例子：

<div class="source"></div>
<div class="same"></div>
<div class="scale"></div>
<div class="fill"></div>

div{
    float: left;
    margin-left: 10px;
    border: 30px;
    width: 240px;
    height: 180px;
}
.source{
    width: 300px;
    height: 240px;
    background-image: url("border3.jpg");
}
.same{
    border-image-source: url("border3.jpg");
    border-image-slice: 30;
}
.scale{
    border-image-source: url("border3.jpg");
    border-image-slice: 30 10;
}
.fill{
    border-image-source: url("border3.jpg");
    border-image-slice: 30 10 fill;
}

最左：DIV背景图用作参考。
第二：距边框top right bottom left分别向里切30px，然后显示到border上，border的宽度正好也是30px，所以边框图片没有拉伸的效果。
第三：距边框top right bottom left分别向里切30px 10px 30px 10px，所以左右两边只切了10px，这10px要显示到边框上，可边框的宽度是30px，所以有被拉伸的效果。
最右：由于设置了fill关键字，所以中间部分也被border-image-source覆盖了。

border-image-width

上例中边框图片被切割的宽度和高度被设置到边框宽度上了，这个宽度可以通过 border-image-width 来设置。他可以接受一到四个值，可以长度值，百分比或是无单位的数值。

E { border-image-width: value; }

此属性不会影响元素边框，及其框模型。
如果其值是无单位的数值n，那么最终 border-image-width 的值是 n * border-width。

border-image-outset

border-image-outset，该属性设置边框图片向外突出的距离，感觉就是向外拉伸多少。接受一到四个值。

E { border-image-outset: 15px 30px; }

border-image-slice 是向里切，这个属性是向外拉（向上，向右，向下，向左）。

border-image-repeat

该属性值是三个关键字：stretch, repeat, round，默认值是stretch。
默认stretch边框图片会沿着边框的长度被拉伸；
repeat 边框图片会沿着边框重复显示，会截断图片。
round 边框图片会沿着边框重复显示，但是他不会截断图片。比如repeat显示了2.6张，那么round后就会显示3张，这3张会被拉伸或压缩。

E { border-image-repeat: keyword; }

还可以同时设置两个关键字，分别控制水平和垂直方向。

E { border-image-repeat: stretch round; }

<div class="same"></div>
<div class="scale"></div>
<div class="fill"></div>

div{
    float: left;
    margin-left: 10px;
    border: 30px;
    width: 240px;
    height: 280px;
    border-image-source: url("border3.jpg");
    border-image-slice: 30 fill;
}
.scale{
    border-image-repeat: repeat;
}
.fill{
    border-image-repeat: round;
}

border-image

速写属性border-image:

E { border-image: source slice/ width/ outset repeat; }

E {
    border-image-source: url('foo.png');
    border-image-slice: 25 10 fill;
    border-image-width: 25px 10px;
    border-image-outset: 5px;
    border-image-repeat: round;
}
F { border-image: url('foo.png') 25 10 fill / 25px 10px / 5px round; }

box-shadow

为边框添加阴影效果。

E { box-shadow: inset horizontal vertical blur-radius spread color; }

同text-shadow，box-shadow也可以同时设置多个阴影。

<div>box-shadow</div>
<div class="blur">blur</div>
<div class="spread">negative spread</div>
<div class="outset">outset</div>
<div class="inset">inset</div>
<div class="multi">multiple shadow</div>

div{
    width: 100px;
    height: 100px;
    text-align: center;
    margin-left: 20px;
    border: 1px solid;
    float: left;
    -webkit-box-shadow: 5px 5px 0px 0px lightblue;
}
.blur{-webkit-box-shadow: 5px 5px 3px 0px lightblue;}
.spread{-webkit-box-shadow: 10px 10px 3px -5px lightblue;}
.inset{-webkit-box-shadow: inset 5px 5px 3px 5px lightblue;}
.multi{-webkit-box-shadow: inset 5px 5px 3px 0px lightblue,inset -5px -5px 3px 0px pink;}

此文是对《The Book of CSS3 2nd edition》第9章的理解和归纳，方便以后查阅。
感谢其作者Peter Gasston !