CSS3设置边框属性border

学习CSS3边框的新特性：

1、border-color（设置边框颜色）

2、border-image（设置边框为图片）

3、border-radius（边框的半径）

4、box-shadow（阴影效果）

浏览器兼容：

• FireFox拓展前缀：-moz-CSS3属性：值

• Chrome和Safari拓展前缀：-webkit-CSS3属性：值

• Opera拓展前缀：-o-CSS3属性：值

• IE9拓展前缀：-ms-CSS3属性：值

• IE6/7/8：详情见此（兼容大部分CSS3属性）（有副作用！）

border-color：设置边框颜色（只有firefox支持，其他浏览器不兼容）

border-color和传统的设置边框颜色不同，border-color可以设置每一条边框具体由哪几种颜色组成个，每个颜色代表一个像素，如果边框像素大于颜色个数，由最后一个颜色填满剩余像素。

语法：

• border-top-color（上）

• border-right-color（右）

• border-bottom-color（下）

• border-left-color（左）

例子：

border-top-colors:Blue Yellow Red Black Green;

border-bottom-colors:Blue Yellow Red Black Green;

border-right-colors:Blue Yellow Red Black Green;

border-left-colors:Blue Yellow Red Black Green;

 

border-image：设置边框为图片（通过图片来填充边框）

语法：

• border-image-source：指定border的背景图的url

• border-image-slice：设置图片从多少像素开始切割

• border-image-width：定义边框的宽度（不起作用，用border-width）

• border-image-repea：指定图片显示的方法（stretch 拉伸，repeat 重复，round 平铺，默认为stretch 拉伸）

例子：

-moz-border-image: url(***) 0 14 0 14 stretch; /* 老版本的 Firefox */

-webkit-border-image: url(***) 0 14 0 14 stretch; /* Safari */

-o-border-image: url(***) 0 14 0 14 stretch; /* Opera */

border-image: url(***) 0 14 0 14 stretch;

 

border-radius：边框的半径（圆角）

语法：border-radius （不能为负数，0为直角）

• 一个参数：定义四个角的半径；

• 两个参数：第一个参数定义左上角和右下角，第二个参数定义右上角和左下角；

• 三个参数：第一个参数定义左上角，第二个参数定义右上角和左下角，第三个参数定义右下角；

• 四个参数：分别相对于 左上，右上，右下，左下；

• 八个参数：前四个相对于 左上，右上，右下，左下的X轴，后四个相对于 左上，右上，右下，左下的Y轴；

例子：

border-radius:50%（圆形）

 

box-shadow：阴影效果（给元素块添加）

语法：

box-shadow:[inset] x-offset y-offset blur-radius spread-radius color；

• inset：阴影类型。可选，默认投影类型为外阴影。如果设为inset，为内阴影。

• x-offset：X轴偏移量。必选  正值，阴影在对象右边，负值，阴影在对象左边。

• y-offset：Y轴偏移量。必选  正值，阴影在对象下边，负值，阴影在对象上边。

• blur-radius：阴影模糊半径。可选  值越大边缘越模糊。0表示没有模糊效果。

• spread-radius：阴影扩展半径。可选  正直，阴影扩散，负值，阴影缩小。

• color：阴影颜色。可选（建议不要省略）各大浏览器默认值不一致。