如何使一个任意大小的html元素具有部分透明的边框？ [英] How can I make an arbitrary sized html element with partially transparent borders?
问题描述
请考虑以下图片：
这应该看起来像一片草的粗糙（边缘）边缘。它是一个200x200像素png图像，边缘的透明度，以自然的外观。
This is supposed to look like a patch of grass with rough (deckled) edges. It's a 200x200 pixel png image, with transparency at the edges to give a natural look.
问题是，我想设计一个网页，其中我想要所有不同大小的各种元素有这个背景，但我不能使用简单css background属性，因为重复这样的图像不工作：左边的透明度，例如，作为图像的每个副本之间的接缝明显可见。但如果我简单地拉伸图像适合，它看起来不是很好。
The problem is, I'm trying to design a web page where I want various elements of all different sizes to have this background, but I can't use a simple css background property, because repeating an image like this doesn't work: the transparency on the left, for instance, in plainly visible as a seam between each copy of the image. But if I simply stretch the image to fit, it doesn't look very good either.
有没有（跨浏览器）方法来完成这个？ jQuery解决方案也是可以接受的。谢谢！
Is there any (cross browser) way to accomplish this? jQuery solutions are acceptable as well. Thanks!
推荐答案
一个jQuery解决方案：
A jQuery solution:
http://code.google.com/p/scale9grid/
border-image 是纯CSS解决方案：
border-image is the pure CSS solution:
- http://www.w3.org/TR/css3-background/#border -images
- https：//开发人员。 mozilla.org/en/CSS/-moz-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
Unfortunately, the browser support is not yet good enough: http://caniuse.com/border-image
这篇关于如何使一个任意大小的html元素具有部分透明的边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
