如何制作具有部分透明边框的任意大小的html元素？
请考虑以下图像:
这看起来像一块草地,边缘粗糙(有层).它是一个200x200像素的png图像,边缘有透明度,给人一种自然的外观.
问题是,我正在尝试设计一个网页,我希望各种不同大小的元素都具有此背景,但我不能使用简单的css背景属性,因为重复这样的图像不起作用:例如,左侧的透明度,作为图像的每个副本之间的接缝明显可见.但是,如果我只是将图像拉伸到合适的位置,它看起来也不是很好.
有没有(跨浏览器)方式来实现这一目标？jQuery解决方案也是可以接受的.谢谢!
一个jQuery解决方案:
http://code.google.com/p/scale9grid/
border-image 是纯CSS解决方案:
- http://www.w3.org/TR/css3-background/#border-images
- https://developer.mozilla.org/en/CSS/-moz-border-image
不幸的是,浏览器支持还不够好:http://caniuse.com/border-image
