码农教程 - 一技在手,衣食无忧! tools

目录

CSS border-image 属性

❮上一节 完整的CSS参考 下一节❯

示例

指定图片作为元素周围的边框：

#borderimg {
  border-image: url(border.png) 30 round;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个border-image属性允许您指定用作元素周围边框的图片。

border-image 属性是以下属性的简写属性：

省略的值设置为其默认值。

展示演示❯

默认值： 无 100% 1 0 拉伸
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.borderImage="url(border.png) 30 round"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit-、-moz- 或 -o- 的数字指定使用前缀的第一个版本。

Property
border-image 16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-

笔记：请参阅下面每个值的各个浏览器支持。

CSS 语法

border-image: source slice width outset repeat|initial|inherit;

属性值

Value Description Demo
border-image-source The path to the image to be used as a border Demo ❯
border-image-slice How to slice the border image Demo ❯
border-image-width The width of the border image Demo ❯
border-image-outset The amount by which the border image area extends beyond the border box Demo ❯
border-image-repeat Whether the border image should be repeated, rounded or stretched Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

不同的切片值完全改变了边框的外观：

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}
亲自试一试 »

相关页面

CSS教程：CSS 边框图片

CSS 参考：border-image-outset 属性

CSS 参考：边框图片重复属性

CSS 参考：边框图片切片属性

CSS 参考：边框图片源属性

CSS 参考：边框图片宽度属性

HTML DOM 参考：边框图片属性


❮上一节 完整的CSS参考 下一节❯