CSS盒模型高级使用规范文档格式.docx
《CSS盒模型高级使用规范文档格式.docx》由会员分享，可在线阅读，更多相关《CSS盒模型高级使用规范文档格式.docx（57页珍藏版）》请在冰点文库上搜索。
-->
style>
body{
background-color:
deepskyblue;
}
.test{
border:
20pxsolidblack;
.test2{
margin-top:
10px;
5pxsolid;
color:
#f00;
/style>
/head>
body>
divclass="
test"
定义边框特性<
/div>
test2"
边框颜色默认使用文本颜色<
/body>
/html>
2圆角边框
border-bottom-left-radius<
描述：
设置或检索对象的左下角圆角边框。
提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
如设置border-bottom-left-radius:
5px10px;
表示bottom-left这个角的水平圆角半径为5px，垂直圆角半径为10px。
语法：
border-bottom-left-radius：
[<
length>
|<
percentage>
][<
]?
默认值：
<
：
用长度值设置对象的左下角（bottom-left）圆角半径长度。
不允许负值
用百分比设置对象的左下角（bottom-left）圆角半径长度。
不允许负值说明：
-->
ul{
margin:
0;
padding:
li{
list-style:
none;
10px000;
background:
#bbb;
.test.one{
border-bottom-left-radius:
30px;
.test.two{
10px30px;
ulclass="
<
liclass="
one"
水平与垂直半径相同时<
br/>
border-bottom-left-radius:
30px;
/li>
two"
水平与垂直半径不同时<
10px30px;
/ul>
3右下角园边框
border-bottom-right-radius<
设置或检索对象的右下角圆角边框。
如设置border-bottom-right-radius:
表示bottom-right这个角的水平圆角半径为5px，垂直圆角半径为10px。
语法：
border-bottom-right-radius：
用长度值设置对象的右下角（bottom-right）圆角半径长度。
用百分比设置对象的右下角（bottom-right）圆角半径长度。
border-bottom-right-radius:
border-bottom-right-radius:
4检索表格是否合并
border-collapse_CSS参考手册_web前端开发参考手册系列<
设置或检索表格的行和单元格的边是合并还是独立。
border-collapse：
separate|collapse
separate
separate：
边框独立
collapse：
相邻边被合并
h1{
font-size:
16px;
font-family:
Arial;
.separate{
border-collapse:
separate;
.collapse{
collapse;
h1>
separate:
边框独立<
/h1>
tableborder="
1"
class="
separate"
tbody>
tr>
<
td>
独立边框<
/td>
/tr>
/tbody>
/table>
collapse:
相邻边被合并<
collapse"
合并边框<
5检索边框颜色
border-color<
设置或检索对象的边框颜色。
参阅border-colors属性。
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-width等于0或border-style设置为none，本属性将被忽略。
border-width:
border-style:
solid;
/*只提供一个，将用于全部的四边。
*/
border-color:
#000;
/*如果提供两个，第一个用于上、下，第二个用于左、右。
#000#f00;
.test3{
/*提供三个，第一个用于上，第二个用于左、右，第三个用于下。
#000#f00#090;
.test4{
#000#f00#090#0ff;
提供1个参数<
提供2个参数<
test3"
提供3个参数<
test4"
提供4个参数<
6边框图片填充
border-image<
设置或检索对象的边框样式使用图像来填充。
使用图像替代border-style去定义边框样式。
当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。
border-image：
border-image-source>
||<
border-image-slice>
[/<
border-image-width>
?
border-image-outset>
border-image-repeat>
为了方便理解border-image的取值，可将border-image理解成由以下5个伪属性组成：
border-image-source:
none|<
url>
默认值：
none
该属性用于指定是否用图像定义边框样式或图像来源路径。
border-image-slice:
[<
number>
]{1,4}&
&
fill?
100%
该属性用于指定对边框背景图的分割方式
写本文档时尚无浏览器支持参数值fill关键字
border-image-width:
|auto]{1,4}
1
该属性用于指定边框宽度。
该属性可省略，由外部的border-width来定义
写本文档时所有浏览器只支持<
类型的参数值
也可以省略此属性，在外部用border-width属性来设置该值
border-image-outset:
]{1,4}
该属性用于指定对边框背景图的扩展
写本文档时尚无浏览器支持该属性
border-image-repeat:
[stretch|repeat|round|space]{1,2}
stretch
该属性用于指定边框背景图的填充方式。
可定义0-2个参数值，即水平和垂直方向。
如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；
如果2个值都为stretch，则可省略不写。
写本文档时Opera尚不支持该属性，但却默认使用了stretch的效果
none：
无背景图片。
使用绝对或相对地址指定图像。
用浮点数指定宽度。
不允许负值。
用百分比指定宽度。
用长度值指定宽度。
stretch：
指定用拉伸方式来填充边框背景图。
repeat：
指定用平铺方式来填充边框背景图。
当图片碰到边界时，如果超过则被截断。
round：
图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
写本文档时仅Firefox能看到该效果
写法：
内核类型写法（border-image）
Webkit（Chrome/Safari）-webkit-border-image
Gecko（Firefox）-moz-border-image
Presto（Opera）-o-border-image
Trident（IE）
-moz-border-image:
url（skin/flower4.jpg）27/27pxstretch;
-webkit-border-image:
-o-border-image:
border-image:
url（skin/flower4.jpg）27/27px;
用图片来做边框<
border-image:
url（skin/flower4.jpg）27/27pxstretch;
7圆角边框
border-radius<
设置或检索对象使用圆角边框。
提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
水平半径：
如果提供全部四个参数值，将按上左（top-left）、上右（top-right）、下右（bottom-right）、下左（bottom-left）的顺序作用于四个角。
如果只提供一个，将用于全部的于四个角。
如果提供两个，第一个用于上左（top-left）、下右（bottom-right），第二个用于上右（top-right）、下左（bottom-left）。
如果提供三个，第一个用于上左（top-left），第二个用于上右（top-right）、下左（bottom-left），第三个用于下右（bottom-right）。
垂直半径也遵循以上4点。
border-radius：
]{1,4}[/[<
]{1,4}]?
用长度值设置对象的圆角半径长度。
用百分比设置对象的圆角半径长度。
border-radius:
10px20px;
.test.three{
10px20px30px;
.test.four{
10px20px30px40px;
.test2.one{
10px/5px;
.test2.two{
10px20px/5px10px;
.test2.three{
10px20px30px/5px10px15px;
.test2.four{
10px20px30px40px/5px10px15px20px;
h2>
水平与垂直半径相同时：
/h2>
border-radius:
10px;
10px20px;
three"
10px20px30px;
four"
10px20px30px40px;
水平与垂直半径不同时：
10px/5px;
10px20px/5px10px;
10px20px30px/5px10px15px;
borde
升级会员 