边框的css3样式

一、圆角（border-radius）

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数。

第一个参数的参数值对应角的关系如下：

• 一个参数时将用于全部的于四个角。
• 两个参数时第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)
• 三个参数时第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
• 四个参数将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角

圆角的半径可以细分为垂直和水平两个方向单独设置：border-radius:10px 20px 30px 40px/5px 10px 15px 20px;

 

二、阴影（box-shadow）

box-shadow：none | <shadow> [ , <shadow> ]*

<shadow> = inset? && <length>{2,4} && <color>?

none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>：设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

 

可以设置多组阴影效果同时生效：

box-shadow:
0 0 5px 3px rgba(255, 0, 0, .6),
0 0 5px 6px rgba(0, 182, 0, .6),
0 0 5px 10px rgba(255, 255, 0, .6);

 

三、边框图片（border-image）
采用九宫格的方式裁剪图片，来作为边框的背景图片

语法：border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

说明

1、border-image-source：当值为none时才会显示border-style。

2、border-image-slice：[ <number> | <percentage> ]{1,4} && fill?

图片裁剪，一到四个参数，分别代表上右下左分别裁剪的位置。

裁剪方式为九宫格——将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill，如果加上fill参数说明保留九宫格最中间的图片，不加则最中间的图片不显示

一个参数：用于四条边

两个参数：第一个参数用于  上下  第二个参数用于右左

三个参数：第一个参数用于  上  第二个参数用于右左 第三个参数用于下

四个参数：上右下左分别对应四条变

3、border-image-width：[ <length> | <percentage> | <number> | auto ]{1,4}

该属性用于指定使用多厚的边框来承载被裁剪后的图像。该属性可省略，由外部的border-width来定义。

<length>：用长度值指定宽度。不允许负值。

<percentage>：用百分比指定宽度。参照border-image区域进行计算。不允许负值。

<number>：用浮点数指定宽度。不允许负值。

auto：如果auto值被设置，则border-image-width采用与border-image-slice相同的值。

4、border-image-outset：[ <length> | <number> ]{1,4}

该属性用于指定边框图像向外扩展所定义的数值，即如果值为10px，则图像在原本的基础上往外延展10px再显示。

<length>：用长度值指定宽度。不允许负值。
<number>：用浮点数指定宽度。不允许负值。

5、border-image-repeat：[ stretch | repeat | round | space ]{1,2}

该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为stretch，则可省略不写。

stretch：指定用拉伸方式来填充边框背景图。
repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。