如何使用部分透明边框制作任意大小的html元素？

发布时间：2020-12-14 18:30:00 所属栏目：资源来源：网络整理

导读：请考虑以下图像：这看起来像一块草地,边缘粗糙(有层).它是一个200×200像素的png图像,边缘有透明度,给人一种自然的外观. 问题是,我正在尝试设计一个网页,我希望所有不同大小的各种元素都具有此背景,但我不能使用简单的css背景属性,因为重复这样的图像不起作

请考虑以下图像：

这看起来像一块草地,边缘粗糙(有层).它是一个200×200像素的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

发电机：http://border-image.com/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!