问为图片生成框架

EN

如果我是你，我会确保我可以重用(重复)图像，然后我会这样做：

<div id="frame">
   <div id="top-left"></div>
   <div id="top"></div>
   <div id="top-right"></div>

   <div id="left"></div>
   <div id="imageSpace"></div>
   <div id="right"></div>

   <div id="bottom-left"></div>
   <div id="bottom"></div>
   <div id="bottom-right"></div>
</div>

其中：#top-left, #top-right, #bottom-left, #bottom-right使用角图像作为背景，并同时设置了width和height。

和#top, #right, #bottom, #left使用重复的图像作为他们的背景。

检查附加的图像，我把线放在你应该剪切原始帧图像的地方。

此方法将允许您更改#top / #bottom和#left / #right的宽度，以增加框架的大小。

​

​

这可能是相当棘手的事情。

如果您使用的是支持CANVAS的现代浏览器，请查看此演示，它可以实现您想要的功能：CANVAS Demo

否则，您将需要创建8个图像(4个角和4个边)，其中的边是以这样的方式制作的，因为它们可以平铺到您需要的任何大小。

下一个技巧是如何构建框架。你可以手动在你的图片周围创建DIVs/Tables来创建这个效果，但是这样做会很笨重，而且不是很干净。最好的办法是使用jQuery (或您最喜欢的库)通过CSS类(例如"fancyFrame")连接到页面上的所有图像，并根据需要使用HTML标记来使用上面通过CSS创建的图像。

您可以使用A List Apart's Drop Shadow technique，它使用CSS和PNGs自动为图像创建可调整大小的投影。您可以修改技术以创建可调整大小的框架。

您将需要四个div和四个图像。这些角需要以45度的角度进行切割，并保持透明度：

• 图像1-框架的左上角和左上角。
• 图像2-框架的右上角和右侧。
• 图像3-框架的左下角和底部
• 图像4-框架的右下角<

>F210