border-image

border-image

原始图片690*678

测试的图片

标注图片690*678

标注.png

有边框(内容在边框里面)

<style>
  h1 {
    border-width: 72px 24px 24px; /* 边框宽度 */
    border-style: solid; /* 不能省略 */
    
    width: 690px; height: 100px; /* 容器大小 */

    border-image-source: url(aaa.png); /* 图片地址*/
    border-image-slice: 72 24 24 24 fill; /* 切割的宽度与边框宽度相同; fill 内部拉伸填充(最中心那块) */
  }
</style>

<h1>555666</h1>

image.png

无边框(内容贴最边上)

<style>
  h1 {
    border-width: .1px; /* 边框宽度 */
    border-style: solid; /* 不能省略 */
    
    width: 690px; height: 200px; /* 容器大小 */

    border-image-source: url(aaa.png); /* 图片地址*/
    border-image-slice: 72 24 24 24 fill; /* 切割的宽度与边框宽度相同; fill 内部拉伸填充(最中心那块) */
    border-image-width: 72 24 24 24; /* 图片的宽度: 是 border-width 的倍数(但.1px能识别成1px) */
  }
</style>

<h1>555666</h1>

image.png