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; }
| 值 | 描述 |
|---|---|
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 !
