css - 这个图像按钮可以在 CSS 跨浏览器中重现吗？

Question

嗨，精通 CSS 的人!

我得到了用作提交按钮的图像

由于该网站将是多语言的，我不想为每种语言创建不同的图像..所以我想将其设为CSS跨浏览器按钮。

这可能吗？我应该怎么做，因为这是一个有点困难的按钮。

非常感谢:)

Answer 1

这是可能的，但并不容易。您可以将其分解为以下图像:

1. 左上角
2. 右上角
3. 左下角
4. 右下角
5. 左边框
6. 右边框
7. 上边框
8. 下边框
9. 中心

这称为“9-patch”方法。但是，您的底部边框包含不可平铺的眩光。您还可以为此添加另外 2 个补丁:

1. 左下角和下边框之间的左下可拉伸(stretch)像素
2. 右下角和下边框之间的右下可拉伸(stretch)像素

然后，您可以将这些元素包装在 inline-block div 中，并将其用作按钮。还有一个新的border-image您可以与 CSS3 一起使用的属性，但它还没有很好的支持。

您可以使用@font-face嵌入字体。