CSS3--２－－border

css3 border（border实例.html）

A--

设置元素的边框风格。　

B--ｃｓｓ

border-width: 设置元素边框的粗细

border-color:　设置元素边框的颜色

border-style: 设置元素边框的类型

～～～缩写： border: border-width border-style border-color (border: 3px none red)

－－－遵循TRBL border-top(right,bottom,left)-style （同width, color）

border-style: solid; //一个值的时候，四边都是solid类型

border-style: solid dotted //两个值，第一个：上下，第二个：左右

border-style: solid dotted dashed //三个值，第一个：顶边，第二个：左右，第三个：底边

border-style: solid(实线) dotted（点状线） dashed（虚线） inset //四个值，第一个：顶边，第二个：右边，第三个：下边，

／／第四个：左边

～～～border-style

none: 无边框

hidden: 与none相同，常用于解决边框冲突

dotted: 点状边框

dashed: 虚线边框

solid: 实线边框

double: 双线，宽度取决与border-width

groove: 定义３d凹槽边框，效果取决于border-color

ridge: 定义３d垄庄边框，效果取决于border-color

inset: 定义３d inset边框，效果取决于border-color

outset: 定义３d　outset边框，效果取决于border-color

inherit:从父元素继承边框样式

Ｃ--CSS3

border-color （推广度　低）

更多颜色，标准写法拆分成四个边框 (border-...-colors(pl.))

###border-top-colors:[<color>|transparent]{1,4}|inherit

###border-right-colors:[<color>|transparent]{1,4}|inherit

###border-bottom-colors:[<color>|transparent]{1,4}|inherit

###border-left-colors:[<color>|transparent]{1,4}|inherit

目前使用前缀：

Mozilla(常Firefox) -moz-

OPera -o-

Konqueror -khtml-

Internet Explorer -ms-

eg. -moz-border-top-colors: #111 #222 #333 #444 #555;

可利用-prefix-free插件略去浏览器前缀

！！！　border-color设置颜色值：

１个： 与css1中相同

ｎ个：　边框宽度为n,n个颜色，每种像素显示一种颜色

Ｘ个：　宽度值>颜色值，　最后一种颜色显示剩余的宽度

border-image

基本语法：

border-image: none | <image> [<number> | <percentage>] {1,4}

　[/ [border-width>{1,4} ] ?[stretch | repeat | round]{0,2}

解释－－－－－－－－－－－－－

none: 默认值

<image> 设置背景图片，跟background一样,可以使用绝对地址和相对地址，来指定边框的背景图片

<number> number是一个数值，用来设置边框或者边框背景图片的大小，单位：像素；使用１－４个值表示４个方位

<percentage> 百分比

stretch,repeat,round 这三个属性参数是用来设置边框背景图片的铺放方式,like background-repeat;

stretch:拉伸（默认）；　repeat:重复；　round:平铺边框；

###border-image-source: 引入背景图片 url(image url);

###border-image-slice: 切割引入背景图片 [<number> | <transparent>] {1,4} && fill ?

number ：没有单位，默认px。

fill ：图片边界的中间部分将保留下来

图片九宫格

border-top-left-image border-top-image border-top-right-image

border-left-image 中间 border-right-image

border-bottom-left-image border-bottom-image border-bottom-right-image

###border-image-width: 边框图片的宽度

语法： border-image-width: [<length> | <percentage> | <number> | auto] {1,4}

###border-image-repeat: 边框背景图片的排列方式

语法：　border-image-repeat: [stretch | repeat | round] {1,2}

!!!不支持trbl，　只有两个参数：　水平和垂直

！！！border-image: [source] || [slice] || [/width] || [repeat]　必须写在一起

border-radius :常见（取值为none不能取消圆角，需要设置值为０）

语法： border-radius: none | <length>{1,4} [/<length>{1,4}] ?

/前面：　设置水平方向半径

/后面：　设置垂直方向半径　（无/。　水平垂直相同）

length{1} 相同

length{2} 左上、右下 取第一个值； 右上、左下　取第二个值

length{3} 左上：　第一个值； 右上、左下：　第二个值； 右下：　第三个值；

length{4} 左上、右上、右下、左下

(不过派生的border-radius子属性不相同)

＃＃＃＃border-top-left-radius: <length>／<length>

＃＃＃＃border-top-right-radius: <length>/<length>

＃＃＃＃border-bottom-left-radius: <length>/<length>

＃＃＃＃border-bottom-right-radius: <length>/<length>

我的firefox:

####　-moz-border-radius-topleft:<length>/<length>

#### -moz-border-radius-topright:<length>/<length>

#### -moz-border-radius-bottomleft:<length>/<length>

#### -moz-border-radius-bottomright:<length>/<length>

特殊应用：

１：内外半径

＝＝＝＝当border-radius小于border的厚度时候，边框内部就不具有圆角效果

border-radius与border差：

<=0 :　内角为直角

>0 : 内角有幅度

２：相邻边宽度不同，角会从宽的边平滑过度到窄的一边，其中一条边可以是０，相邻转角由大向小变化

＝＝＝＝45°：两条相邻边宽度相同

30°: 其中一条边是另外一条边的两倍

界定这个转变的线就是连接在内外曲线上的两个点的直线

！！！表格元素table使用border-radius的时候，当元素属性border-collapse为separate的时候才会显示圆角

（详情参照　border实例.html)

box-shadow :css3的盒子阴影特性应用广泛

用法： box-shadow:none |

[ <length> <length> <length>?<length>? || <color> ],[ <length> <length> <length>?<length>? || <color> ]+

简写：　box-shadow: none |

[inset x-offset y-offset blur-radius spread-radius color], [inset x-offset y-offset blur-radius spread-radius color]

可以使用一个或者！多个（先写的阴影将在最上层）！投影，其中用‘，’分隔开

说明：

none: 默认，无阴影

inset: 阴影类型，选值。默认，外阴影；inset,内阴影；

x-offset: 阴影水平偏移量，正负值。＋右边；－左边

y-offset: 阴影垂直偏移量，正负值。＋底边；－顶边

blur-radius: 模糊半径。正值！　０：阴影不具备模糊效果，越大阴影边缘越模糊

spread-radius: 扩展半径。正负值！　＋：都延展；　－都缩小（单独使用可实现border效果，但并非真正边框，只是一层阴影）

color: 颜色。 不设定将默认值。建议取值

！！！非０值的border-radius以相同的作用影响阴影的外形，border-image不会影响阴影的任何外形

对象阴影同盒模型层次一样，外阴影会在对象背景之上，内阴影会在！背景！图片（对图片无作用）之上。

背景图片在背景色之上，背景色在外阴影之上。