CSS3——边框

一、简介

CSS3新增了3中边框属性：

• border-radius：圆角边框。
• box-shadow：边框阴影。
• border-image：图片边框。

注意：目前IE9+支持border-radius和box-shadow属性。Firefox、Chrome以及Safari支持所有新的边框属性。对于border-image，Safari5以及更老的版本需要前缀-webkit-。Opera支持border-radius和box-shadow属性，但是对于bordor-image需要前缀-o-。

二、圆角边框（border-radius）

1、基本用法

圆角边框最基本的用法是设置4个相同弧度的圆角，例如：

.div {
    border: 1px solid black;
    border-radius: 5px;
    -moz-border-radius: 5px; /*支持旧版本的Firefox浏览器*/
    -webkit-border-radius: 5px; /*支持旧版本的webkit核心浏览器*/
}  

2、使用百分比作为单位

border-radius可以使用百分比作为单位，比如对一个正方形设置border-radius: 50%;会形成一个圆形，不过使用百分比和使用像素并不能等效。

注意：百分比大于50%之后，形状就不会再变化了，因为圆角的半径不能超过长/宽的一半。

3、设置不同弧度的圆角

在设置中我们可以为元素的4个角设置不同弧度的圆角。
例如：

border-top-left-radius: 10px;  /*左上角*/
border-top-right-radius: 10px; /*右上角*/
border-bottom-left-radius: 10px; /*左下角*/
border-bottom-right-radius: 10px; /*右下角*/

三、边框阴影（box-shadow）

box-shadow的参数

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

参数的组合顺序为：

box-shadow: {color h-shadow v-shadow blur spread inset}

1、内外阴影

外部阴影显示在边框的外部，而内部阴影则显示在边框的内部。

2、偏移量

用于表示阴影的偏移方向，当其为外阴影且水平阴影的位置和垂直阴影的位置均设置为正值时，则向其右下方进行偏移；当其为内部阴影时，其相关的偏移方向则相反。

注意：对于水平方向，其右边为正值；对于垂直方向，其下方为正值。

3、阴影尺寸

指外阴影外延出去的总的长度。

4、模糊距离

模糊距离的外延长度等于其设定值的1/2。

注意：和边框不同，阴影是不占据空间的。

四、图片边框（border-image）

图片边框可以让图片环绕在元素周围。

注意：IE均不支持该属性，同时由于其仍然需要加载图片，相比于传统的图片背景的方式性能提升性并不是很大，所以这个新属性在实际环境中应用很少。

border-image的参数选项

值	描述
border-image-source	用在边框的图片的路径
border-image-slice	图片边框向内偏移
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像边框是否应平铺（repeat）、铺满（round）或拉伸（stretch）

Firefox、Chrome以及Safari6都支持border-image属性。Opera支持替代的-0-border-image属性，因此在编写兼容性代码时需要添加-o-前缀，以适应Opera浏览器。Safari5支持替代的-webkit-border-image属性。

注意：图片边框是不占据空间的。

1、border-image-source

相关语法如下所示：

border-image-source: url(image url); /*image url可以是相对地址也可以是绝对地址*/

2、border-image-slice

相关的语法为：

border-image-slice: [<number>|<percentage>]

在相关的取值中，其支持数字和百分比。其中数字是没有单位的，专指像素（px），如果加上了单位反而是错误的。另外还可以使用百分比值来作为单位，百分比的值是相对于边框背景图片而言的。

3、border-image-width

定义了图片边框的宽度

4、border-image-outset

定义了图片边框外延的距离，默认为0，即图片边框默认在元素内部。

5、border-image-repeat

定义了4条边的显示，它含有3个选项：repeat、round、stretch。

repeat、round和stretch3个选项的区别：

• repeat不管是否适合border-width的宽度，直接居中重复。
• round会压缩或伸展border-image的背景图片使其能够刚好适应border-width的宽度，从而正好在边框区域内显示。
• stretch实际上是将除了4个角以外的其他部分进行拉伸，以适应元素的边长。

五、通过resize属性来改变输入框的大小

对于像<textarea>这样可以设置overflow属性的元素，CSS3提供了一个叫做resize的方法，让用户可以通过拖拽来改变框体的大小。

resize属性的选项参数

值	描述
none	用户无法调整元素的尺寸
both	用户可调整元素的高度和宽度
horizontal	用户可调整元素的宽度
vertical	用户可调整元素的高度

注意：目前只有webkit核心浏览器才支持resize属性，并且只支持等比例调整。

resize属性默认是打开的，如果想关闭resize，可以使用如下两种方法：
（1）通过resize属性禁止对元素进行缩放：

textarea {
	resize: none;
}

（2）限制文本框的最大以及最小宽、高：

textarea {
    max-height: 10px;
    min-height: 10px;
    height: 10px;
    max-width: 10px;
    min-width: 10px;
    width: 10px;
}

注意：此方法不能去掉右下角可拖动样式。

六、总结

• 可以为边框的4个角设置不同的圆角。
• 可以采用百分比设置圆角，其中值大于等于50%时，正方形元素将呈现为圆形。
• 一般边框外阴影展现凸起效果，内阴影展现内凹效果。
• 图片边框目前由于浏览器兼容性以及对图片的依赖性，目前并不推荐使用。
• textarea等可以设置overflow属性的元素，在webkit核心浏览器下可以通过拖拽改变其大小，当然也可以通过resize: none禁用这种拖拽。