最佳实践（photoshop与css的边界）

Question

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

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

Answer 1

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

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

使用stretch会拉伸图片的中间部分，而使用round会将其平铺。

example on w3schools很好地展示了这一点。