html - 最佳实践（photoshop 边框到 css）

Question

我打算创建一个带有测验问题的小网站（论坛）。所以我有了一个想法，在 Photoshop 中制作很酷的边框（冰、火、土）并在网站上实现它们。我没有任何创建实时网站的经验，所以我很想知道这样做的最佳实践是什么？问题是问题可能有 10 到 100 个单词，所以我需要不同的边框大小。
我目前有两种方法可以做到这一点，但都没有真正让我满意。1) 在 Photoshop 中创建不同的边框尺寸，并在发布问题时检查字符长度并使用适当的边框。2）已经创建带有问题的图像，然后像这样发布。

我也担心网站的速度。我意识到这不是一种常见的做法，但它可行吗？任何输入或指南表示赞赏。

Answer 1

最简单的方法是使用 CSSborder-image属性。您可以创建具有所需边框的方形图像，然后添加具有以下格式的 CSS 属性：

question-border{
    border-image: url(<url of image on webserver>) <px size of border> <stretch/round>
}

Usingstretch将拉伸图像的中间部分，而 usinground将平铺它。

w3schools 上的示例很好地说明了这一点。