CSS3 border-image 属性

最新推荐文章于 2025-05-23 10:57:58 发布

全力付出

最新推荐文章于 2025-05-23 10:57:58 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/zhengyong15984285623/article/details/8783425

html5 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了 CSS 中 border-image 属性的使用方法，包括如何设置边框图像、剪裁位置及图像的重复方式等。并通过与 background 属性的对比帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-moz-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */
-webkit-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Safari */
-o-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Opera */
border-image: url(/i/border_image_button.png) 0 14 0 14 stretch;

例如：border-image:url(border.png) 27 repeat;，指的就是图片(url(border.png))，剪裁位置(27)，
重复方式(repeat)。试着对比background，这有助于border-image属性的记忆。
border-image的参数就是上面提到的三个：图片，剪裁位置，重复性。

border-image:url:(images/WhiteButton.png) 0 12 0 12 stretch stretch;
“0 12 0 12”：按顺时针方向分别是上右下左边框的宽度，即上：0；右：12；下：0;左：12。
stretch | repeat | round 即为除去边框后的图像拉伸的方法，第一个stretch为上下拉伸方法，第二个stretch为左右拉伸方法：
stretch：指定用拉伸方式来填充边框背景图。
repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。