书签分享收藏举报版权申诉 / 47

立即下载加入VIP,免费下载

当前位置：首页 > 小学教育 > 语文 > CSS盒模型高级使用规范.docx

CSS盒模型高级使用规范.docx

文档编号：7334080
上传时间：2023-01-23
格式：DOCX
页数：47
大小：29.45KB

CSS盒模型高级使用规范.docx

《CSS盒模型高级使用规范.docx》由会员分享，可在线阅读，更多相关《CSS盒模型高级使用规范.docx（47页珍藏版）》请在冰豆网上搜索。

CSS盒模型高级使用规范.docx

CSS盒模型高级使用规范

Border

DOCTYPEhtml>

border

--

描述：

复合属性。

设置对象边框的特性。

如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。

取值：

[border-width]：

设置或检索对象边框宽度。

[border-style]：

设置或检索对象边框样式。

[border-color]：

设置或检索对象边框颜色。

-->

定义边框特性

边框颜色默认使用文本颜色

2圆角边框

DOCTYPEhtml>

border-bottom-left-radius

--

描述：

设置或检索对象的左下角圆角边框。

提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

如设置border-bottom-left-radius:

5px10px;表示bottom-left这个角的水平圆角半径为5px，垂直圆角半径为10px。

语法：

border-bottom-left-radius：

[|][|]?

默认值：

0

取值：

：

用长度值设置对象的左下角（bottom-left）圆角半径长度。

不允许负值

：

用百分比设置对象的左下角（bottom-left）圆角半径长度。

不允许负值说明：

-->

水平与垂直半径相同时
border-bottom-left-radius:

30px;

水平与垂直半径不同时
border-bottom-left-radius:

10px30px;

3右下角园边框

DOCTYPEhtml>

border-bottom-right-radius

--

描述：

设置或检索对象的右下角圆角边框。

提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

如设置border-bottom-right-radius:

5px10px;表示bottom-right这个角的水平圆角半径为5px，垂直圆角半径为10px。

语法：

border-bottom-right-radius：

[|][|]?

默认值：

0

取值：

：

用长度值设置对象的右下角（bottom-right）圆角半径长度。

不允许负值

：

用百分比设置对象的右下角（bottom-right）圆角半径长度。

不允许负值说明：

-->

水平与垂直半径相同时
border-bottom-right-radius:

30px;

水平与垂直半径不同时
border-bottom-right-radius:

10px30px;

4检索表格是否合并

DOCTYPEhtml>

border-collapse_CSS参考手册_web前端开发参考手册系列

--

描述：

设置或检索表格的行和单元格的边是合并还是独立。

语法：

border-collapse：

separate|collapse

默认值：

separate

取值：

separate：

边框独立

collapse：

相邻边被合并

-->

separate:
边框独立

独立边框

collapse:
相邻边被合并

合并边框

5检索边框颜色

DOCTYPEhtml>

border-color

--

描述：

设置或检索对象的边框颜色。

参阅border-colors属性。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将用于全部的四边。

如果提供两个，第一个用于上、下，第二个用于左、右。

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

如果border-width等于0或border-style设置为none，本属性将被忽略。

-->

提供1个参数

提供2个参数

提供3个参数

提供4个参数

6边框图片填充

DOCTYPEhtml>

border-image

--

描述：

设置或检索对象的边框样式使用图像来填充。

使用图像替代border-style去定义边框样式。

当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。

语法：

border-image：

||[/?

[/]?

]?

||

为了方便理解border-image的取值，可将border-image理解成由以下5个伪属性组成：

border-image-source:

none|

默认值：

none

该属性用于指定是否用图像定义边框样式或图像来源路径。

border-image-slice:

[|]{1,4}&&fill?

默认值：

100%

该属性用于指定对边框背景图的分割方式

写本文档时尚无浏览器支持参数值fill关键字

border-image-width:

[|||auto]{1,4}

默认值：

1

该属性用于指定边框宽度。

该属性可省略，由外部的border-width来定义

写本文档时所有浏览器只支持类型的参数值

也可以省略此属性，在外部用border-width属性来设置该值

border-image-outset:

[|]{1,4}

默认值：

0

该属性用于指定对边框背景图的扩展

写本文档时尚无浏览器支持该属性

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）

-->

用图片来做边框
border-image:

url（skin/flower4.jpg）27/27pxstretch;

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

经营许可证编号:鄂ICP备2022015515号-1

CSS盒模型高级使用规范.docx

separate:
边框独立

collapse:
相邻边被合并

水平与垂直半径相同时：

水平与垂直半径不同时：

CSS盒模型高级使用规范.docx

separate:边框独立

collapse:相邻边被合并

水平与垂直半径相同时：

水平与垂直半径不同时：

热门标签

separate:
边框独立

collapse:
相邻边被合并