css - WebKit CSS : Use for -webkit-border-image a picture from an image array

标签 css webkit

在我的 iPhone/Android/BB6 网络应用程序中,我尝试将所有图像放入图像数组(类似此处 http://goo.gl/VcMcj ),以优化加载时间。

在大多数情况下,它可以很好地配合背景位置/宽度/高度属性。 现在我想将我的 -webkit-border-image 放入图像数组中,但不知道如何做。

这可能吗?

提前致谢!

最佳答案

我将前两个按钮组合并调整为一个图像:

Live Demo

#leftnav a:first-child {
    /* 0 5 0 13 */
    -webkit-border-image: url(http://i.stack.imgur.com/Iz5Jl.png) 0 5 30 13
}

#leftbutton a,#rightbutton a,#imbutton a {
    /* 0 5 0 5 */
    -webkit-border-image: url(http://i.stack.imgur.com/Iz5Jl.png) 30 5 0 5
}

可能不值得为这里涉及的微小文件大小和图像数量而烦恼。


当我查看此内容时,我发现了一个使测试变得容易的网站:

http://border-image.com


我无法使用文本框边框,所以我留下了那个:

这是我在放弃之前制作并尝试过的图像,如果它有帮助的话:

关于css - WebKit CSS : Use for -webkit-border-image a picture from an image array,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4990477/

相关文章:

javascript - 如何将 JavaScript 函数应用于多个图像

javascript - 有什么方法可以停止或暂停 JSContext 对象中 Javascript 的执行?

iphone - 将 UIWebView-heavy iPhone 应用程序移植到 Mac

html - 自定义光标不起作用?

html - 输入框和按钮与 IE 和 Firefox 不匹配

javascript - 为什么这个 webkit 动画看起来很粗略?

javascript - 为什么 Firefox 对 "click"标签上的 "select"事件的 react 不同于 Webkit 和 IE?

css - CSS3 webkit-transition使用div的多个属性和多个webkit-transition-delay

c# - 如何将从网站下载的数据转换为正确的编码?

单击后 jQuery 动画将不起作用