border-image属性+点九图设计使用方法

本文介绍了如何使用CSS的border-image属性来创建一个宽高可变的八边形背景，通过四角固定，中间部分拉伸实现自适应效果。详细讲解了CSS代码实现，并给出了具体示例，包括模板、样式和引用的点九图设计。

前提

UI做的一个页面的设计图，主体内容背景是一个八边形，加四个不规则顶角边框。

实现思路

宽、高固定，那就简单了，直接让UI给出一个固定宽高的背景.png就好了。

宽、高不固定，可以参考聊天气泡框实现原理，4个顶角是固定的，将中间的纯背景进行拉伸。

UI给我的设计图（关键词：点九图）

4个顶角的尺寸是58px*58px，目前中间的那部分尺寸也是58px，其实中间尺寸>1px就可以了，最好留点安全距离，以便拉伸的时候不会影响到4个角。

我使用css border-image属性完成拉伸效果，实现效果图如下：

局部代码

<template>
  <div class="content-box"></div>
</template>

<style lang="scss" scoped>
.content-box {
  width: 1024px;
  min-height: 600px;
  border: 58px solid transparent;
  box-sizing: border-box;
  -moz-border-image: url("~@/assets/install/biankuang.png") 58 58 stretch; /* Old Firefox */
  -webkit-border-image: url("~@/assets/install/biankuang.png") 58 58 stretch; /* Safari and Chrome */
  -o-border-image: url("~@/assets/install/biankuang.png") 58 58 stretch; /* Opera */
  border-image: url("~@/assets/install/biankuang.png") 58 58 fill repeat stretch;
}
</style>

参考博客：

border-image 的正确用法_凹凸实验室-优快云博客