CSS3 / border-image属性最简单的使用方法 - 汇智网

CSS3 互动版

新增属性选择器

简介匹配属性值——开始值匹配属性值——包含值匹配属性值——结尾值

新增结构伪类选择器

简介选择首个子元素选择末尾子元素选择首个类型子元素选择末尾类型子元素选择一或多个子元素选择类型子元素(倒序) 选择指定类型元素选择父元素的特定子元素(倒序) 选择有唯一子元素的元素选择元素的子元素并类型是唯一的子元素选择内容为空的元素

CSS3 圆角边框

简介 border-radius属性 border-radius中指定两个半径不显示边框修改边框种类绘制四个角不同半径的圆角边框 CSS3 圆角边框练习

CSS3 图像边框

简介 border-image属性 border-image属性最简单的使用方法使用border-image属性来指定边框宽度中央图像自动拉伸指定四条边中图像的显示方法使用背景图像

CSS3 背景

简介 background-size 属性（调整图片大小） background-size 属性（背景图片拉伸） background-origin 属性多重背景图片 background-clip 属性新的背景属性

CSS3 文本效果

简介 text-shadow属性使用方法位移距离阴影的模糊半径阴影的颜色指定多个阴影自动换行

CSS3 字体

使用您需要的字体使用粗体文本 CSS3 字体描述符

CSS3 2D 转换

简介 2D 转换 translate() 方法 rotate() 方法 scale() 方法 skew() 方法 matrix() 方法新的转换属性 2D Transform 方法

CSS3 3D 转换

简介如何工作与浏览器支持 rotateX() 方法 rotateY() 旋转转换属性 2D Transform 方法

CSS3 过渡

简介如何工作多项改变过渡属性使用了简写的 transition 属性

CSS3 动画

简介实例 CSS3 动画什么是 CSS3 中的动画？实例改变背景色和位置 CSS3 动画属性包含所有动画属性实例使用了简写的动画 animation 属性

CSS3 多列

简介 CSS3 创建多列 CSS3 规定列之间的间隔 CSS3 列规则新的多列属性

CSS3 用户界面

简介 CSS3 Resizing CSS3 Box Sizing CSS3 Outline Offset 新的用户界面属性

在线工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

border-image属性最简单的使用方法如下所示。

border-image:url(图像文件的路径) A B C D

-webkit-border-image：url(图像文件的路径) A B C D

-moz-border-image：url(图像文件的路径) A B C D

border-image属性值中至少必须指定五个参数，其中第一个参数为边框所使用的图像文件的路径，A、B、C、D四个参数表示当浏览器自动把边框所使用到的图像进行分隔时的上边距、右边距、下边距及左边距。如下图1图示的方法对这四个参数进行了说明。

图1：图2：

接下来，让我们看一下如果在border-image属性值中指定了这四个参数，浏览器对于边框所使用的图像是如何进行分割的。

首先，当在样式代码中书写如下所示的代码时，浏览器对于边框所使用的图像分割方法如图2所示。

border-image：url(borderimage_1.png) 18 18 18 18

-webkit-border-image:url(borderimage_1.png) 18 18 18 18

border-image:url(borderimage_1.png) 18 18 18 18

如图中所示，图像被自动分割为9部分。分割后的图像在CSS3中的名称如表所示

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

border-left-image / / border-right-image

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

下面示例代码，可以看出浏览器是如何将分割图像显示在一个边框宽度为5px的div元素中。

.wrap{
    border:solid 5px;
    border-image:url(img/border.png) 18 18 18 18;
    -webkit-border-image:url(img/border.png) 18 18 18 18;
    -moz-border-image:url(img/border.png) 18 18 18 18;
    width:300px;
}

border-image属性

使用border-image属性来指定边框宽度