css3.0学习 第一节 边框

%77w%77%2E%66%6F%72%61%73%70%2E%63%6E
1.border-color

语法：
border-color:<color>
相关属性：border-top-color,border-right-color,border-bottom-color,border-left-color

取值：<color>：颜色值

说明：
设置对象边框的颜色，使用CSS3的border-radius属性，如果你设置了border的宽度是Xpx，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度，如果说你的border的宽度是10px，但是只声明了7种颜色，那么最后一个颜色将被添加到剩下的宽度。
引擎类型：border-color
Gceko：-moz-border-color

兼容性：目前只有Firefox3.0和Firefox3.5支持此技术

代码示例：
<div style="border:8px solid #000;-moz-border-bottom-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-left-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-right-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;"padding: 5px 5px 5px 15px;">在Firefox浏览器里能看到边框颜色渐变效果</div>


2.border-image

语法：
border-image:none | <image>[<number>|<percentage>]{1,4}[/<border-width>{1,4}]?[stretch|repeat|round]{0,2}
相关属性：border-image:border-top-image,border-right-image,border-bottom-image,border-left-image
border-corner-image:border-top-left-image,border-top-right-image,border-bottom-left-image,border-bottom-right-image

取值：
none:默认值，无背景图
<image>:使用绝对或相对url地址指定背景图像
<number>:边框宽度用固定像素值表示
<percentage>:边框宽度用百分比表示
[stretch|pepeat|round]:拉伸|重复|平铺（其中stretch是默认值）

说明：
使用图片作为对象的边界，当table设置border-collapse为collapse无效
引擎类型：border-image
Gecko：-moz-border-image
WebKit：-webkit-border-image

兼容性：
Firefox3.5，chrome1.0，chrome2.0，Safari3.1，Safari4支持此技术

代码示例：
<div style="-webkit-border-image:url(foraspimg/forasp.png) 0 12 0 12 stretch stretch;-moz-border-image:url(foraspimg/forasp.png) 0 12 0 12 stretch stretch;display:block;bordr-width:0 12px;padding:10px;text-align:center;font-size:16px;color:#fff;">在Safari3+和FF3.5浏览器里能看到边框背景图</div>


3.border-radius

语法：
border-radius:none|<length>{1,4}[/<length>{1,4}]?
相关属性：border-top-right-radius,border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius

取值：
<length>:由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius:由浮点数字和单位标识符组成的长度值。不可为负值

说明：
第一个值是水平半径，如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角，如果任意一个值为0，则这个角是矩形，不会是圆的，值不允许时负值
引擎类型：border-radius,border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius,border-top-right-radius
Gecko:-moz-border-radius,-moz-border-radius-bottomleft,-moz-border-radius-bottomright,-moz-border-radius-topleft,-moz-border-radius-topright
webkit:-webkit-border-radius,-webkit-border-bottom-left-radius,-webkit-border-bottom-right-radius,-webkit-border-top-left-radius,-webkit-border-top-right-radius

兼容性：
Firefox3.0，Firefox3.5，chrome1.0，chrome2.0，Safari3.1支持

代码示例：
<div style="border-width: 1px;border-style: solid;-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius:11px;padding:5px;">在Firefox和Safari 3的浏览器里能看到圆角效果</div>


4.box-shadow

语法：
box-shadow:<length><length><length><length>||<color>
相关属性：text-shadow

取值：
<length><length><length>？<length>？||<color>：阴影水平偏移（可取正负值）；阴影垂直偏移（可取正负值）；阴影模糊值；阴影颜色

说明：
设置块阴影
引擎类型：box-shadow
Cecko:-moz-box-shadow
webkit:-webkit-border-shadow

兼容性：
Firefox3.5，chrome2.0，Safari4支持

代码示例：
<div style="-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;">Safari下可以看到效果</div>

http://www.forasp.cn/