效果

preview

实现

#post-content img {
    border: 1px solid transparent;
    border-image: url('https://blog.irow.top/usr/files/img/border.jpg') 1 1 1 stretch;
}

语法

这里仅作宽泛介绍,如果想弄清楚具体用法,可以看看这篇文章介绍的,图文讲解,很明了。

https://segmentfault.com/a/1190000010969367?utm_source=tag-newest

border-image: source slice width outset repeat|initial|inherit;
描述
border-image-source用于指定要用于绘制边框的图像的位置
border-image-slice图像边界向内偏移
border-image-width图像边界的宽度
border-image-outset用于指定在边框外部绘制 border-image-area 的量
border-image-repeat用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIE/EdgeFirefoxSafariOpera
border-image16.0 4.0 -webkit-11.015.0 3.5 -moz-6.0 3.1 -webkit-15.0 11.0 -o-
最后修改:2019 年 08 月 26 日 10 : 32 AM
如果觉得我的文章对你有用,请随意赞赏