javascript - 为多种尺寸的 HTML div 提供图像边框的 CSS/Javascript 代码

Question

我打算编写一个在现代浏览器中运行的 HTML5/Javascript 游戏。它将需要其边框由图像组成的对话框(即模态弹出窗口)(例如，一个用于垂直，一个用于水平，一个用于每个 Angular )。弹出窗口和边框应包含 div(包含文本或其他内容)并调整其大小。会有很多不同大小的弹出窗口。因此，我可以提供(可重复的？)用于制作边框的图像，但我不想为我的游戏中需要的每种尺寸的弹出窗口创建一个图像。

希望我的要求足够明确。我可以只用 CSS 做到这一点吗？是否有一些示例 CSS“库”可以执行此操作？或者我是否需要使用 Javascript(或 CSS 和 Javascript 的组合)，如果需要，是否有我可以使用的示例或库？

Answer 1

您可以通过为每种类型的元素(左边框、左下角)等分配一个类，然后将背景图像和该类的 css 宽度/高度设置为您需要的图像和尺寸来完成此纯 css。