CSS3中border-image属性的最简单的使用方法

最新推荐文章于 2024-08-20 16:34:09 发布

u013063153

最新推荐文章于 2024-08-20 16:34:09 发布

阅读量9.8k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/u013063153/article/details/52425637

版权

CSS 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

border-image属性的最简单的使用方法如下：

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

A B C D 4个参数表示当浏览器自动把边框使用到的图像进行分割时的上边距、右边距、下边距、左边距。

border-image：url(borderimage.png) 18 18 18 18 分割如下图：

图像被分割成9部分。

被分割为9部分的图像名称
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-top-left-image、border-top-right-image、border-bottom-left-image、border-bottom-right-image这4个部分是没有任何展示效果的，不会平铺、不会重复、也不会拉伸，类似于视觉中的盲点。

对于border-top-image、border-right-image、border-bottom-image、border-left-image这4个部分，浏览器分别作为上边框使使用的图像、右边框使用的图像、下边框使用的图像、左边框使用的图像进行显示，必要时可以将这4个部分图像进行平铺或拉伸。

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

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

例如：border-image:url(borderimage.png) 18/5px 18 18 18/10px;