最佳做法（photoshop 边框 css）
Best practices (photoshop border to css)
我打算创建一个带有测验问题的小网站（论坛）。所以我有了一个想法，在 Photoshop 中制作很酷的边框（冰、火、土）并在网站上实现它们。我没有任何创建实时网站的经验，所以我很想知道这样做的最佳做法是什么？问题是问题可能有 10 到 100 个字，所以我需要不同的边框大小。
我目前有两种方法可以做到这一点，但都不能真正让我满意。
1) 在 photoshop 中创建不同的边框大小，当 posting 问题检查字符长度并使用适当的边框时。
2) 创建带有问题的图片，post 就这样。
我也担心网站的速度。我意识到这不是一种常见的做法，但它可行吗？感谢任何意见或指导。
最简单的方法是使用 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 很好地展示了这一点。
我打算创建一个带有测验问题的小网站（论坛）。所以我有了一个想法，在 Photoshop 中制作很酷的边框（冰、火、土）并在网站上实现它们。我没有任何创建实时网站的经验，所以我很想知道这样做的最佳做法是什么？问题是问题可能有 10 到 100 个字，所以我需要不同的边框大小。
我目前有两种方法可以做到这一点，但都不能真正让我满意。
1) 在 photoshop 中创建不同的边框大小，当 posting 问题检查字符长度并使用适当的边框时。
2) 创建带有问题的图片，post 就这样。
我也担心网站的速度。我意识到这不是一种常见的做法，但它可行吗？感谢任何意见或指导。
最简单的方法是使用 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 很好地展示了这一点。