最佳实践（photoshop 边框到 css）

Question

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

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

Answer 1

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

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

使用stretch 将拉伸图像的中间部分，而使用round 将平铺它。

example on w3schools 很好地说明了这一点。