【发布时间】：2011-10-12 00:04:19
【问题描述】：
我刚刚在开发 Android 应用程序时发现了 9-Patch PNG (somefile.9.png)，我对这项技术节省的工作量和文件量感到非常惊讶。
有没有办法以某种方式在常规浏览器上实现这项技术？ （使用某种 jQuery 插件，或其他方式..）。如果它可以与 CSS 一起使用 - 那可能是一个非常好的改进......
【问题讨论】：
【发布时间】：2011-10-12 00:04:19
【问题描述】：
来自 CSS3 的border-image 是最接近的匹配：
- http://www.w3.org/TR/css3-background/#border-images
- https://developer.mozilla.org/en/CSS/-moz-border-image
浏览器支持：http://caniuse.com/border-image
一个有用的生成器：http://border-image.com/
就 jQuery 而言，我通过谷歌搜索"jquery 9 slice scaling" 找到了这个：
http://code.google.com/p/scale9grid/
（9 片缩放是 something similar 的 Adobe Flash 术语）
【讨论】：
-
您还可以使用普通模拟边框并使用 CSS sprite 技术将图像映射到它们上 (alistapart.com/articles/sprites)
scale9grid 插件会生成多个 DOM 对象，并且仅在调整窗口大小或由 JavaScript 手动触发调整大小时才会拉伸。
您不能使用精灵图像，因为您无法重复图像的一部分。您必须剪下 8 块图像（4 个角，4 个边），并且您必须在拉伸时将颜色应用于图像的中心。
值得注意的是，每当您使用拉伸位图图像的技术时，您都有一个最小尺寸。您只能拉伸它超过最小值。这个最小值取决于切出的部分。如果角是 5x5 像素。在最佳情况下，整个元素的最小值为 10x10 像素。
【讨论】：
我可以建议我的解决方案。 它是 jQuery 插件（缩小版）：http://donreptile.com/plugins/slices9.min.js 它支持图像精灵。 http://donreptile.com/plugins/demo.html 这是工作演示。我尝试制作最正确的 9-slice 插件，保持角落不变，水平边框 scale-x，垂直边框 scale-y，中间称为 x 和 y。它提供了比边框背景更好的效果。
【讨论】：