border-image 该属性用作给元素的边框添加背景图片。使用该属性时,会替换掉 border-style 属性所设置的边框样式。
border-image: url("hudao.jpg") 20 20 repeat;
值 | 描述 |
---|---|
image-source | 此关键词表示图片的路径 |
image-height | 此关键词表示图片的高度 |
image-width | 此关键词表示图片的宽度 |
image-repeat | 此关键词表示图片是否平铺,铺满或者拉伸 |
HTML
<div id="red"> </div>
CSS
#red { height: 200px; border: 2px dashed red; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30; }
执行结果