Html 如何分割图像边框以在CSS中使用？

我试图得到一个图像边界切片用于css

以下是我要使用的框边框：

以下是方框的部分代码：

标题
特色方框的内容

我应该如何切片图像，我应该切片一个小区域，然后对每一侧重复-y。然后创建4个新div以插入边框的角

那么如何处理边界的各个角落呢

哪种方法是以快速加载速度显示方框的最佳方法

---

@三十点，盒子的宽度是固定的， 宽度和高度。如何使用4 带div的角？-伊本·赛义德

也许我遗漏了什么，但是如果盒子是固定大小的，你不能将

div

的

宽度和
高度设置为准确的尺寸，并将其设置为
背景图像

如下所示：
当然，对于这种边框，您最好使用css边框：3px solidblue@amadeus不过，我不确定有没有CSS方法可以在没有图像的情况下获得中间偏斜的方框阴影。@马特·吉布森：哇，非常微妙，我没想到。我需要使用图像，这不是问题。问题在于角落。我是否必须使用额外的div来放置上/下（左和右）角？@thirtydot，框的宽度是固定的，宽度和高度都是固定的。我怎么用四角和div？是的，我知道。但我想把边界和角落都切掉。我尽量不使用完整的图像作为背景，希望保持最小的大小。例如，仅使用左右边框的1px高度选择，并将其设置为“重复Y”为什么要这样做？如果您可以在以后更改框的
宽度
/
高度
，那没关系，我会更新我的答案。然而，如果只是用一个小图像来“减小文件大小”，那就不值得了：你的图像只有
6.7KB
。那么，你的理由是什么？@thirydot，你的尺寸是对的。不知怎的，当我用背景分割整个边框时，PNG的大小大约是1.2MB。我现在又检查了一遍，它是3.4Kb。很好。我认为问题出现在切片过程中，因为它还捕获了一些沉重的图像。
  <div class="wrapper">
            <div id="featured_box1">
                <div class="Content1">
                    <h2>Heading</h2>
                    <p>Content for Featured Box</p>
                </div>
            </div>               
</div>