渐变边框用css / html淡化周围的div

时间:2011-09-09 07:54:11

标签: html css border gradient

您好我试图找出如何创建一个渐变为div的背景颜色的边框,这是我能想到的唯一解决方案。 我已经google了,似乎人们建议使用CSS3,但我被告知它仍处于“正在开发中”并且未在现代浏览器中完全引入,如果我错了,请纠正我,可能是。

无论如何,这是我提出的解决方案,有更简单的方法吗?或者这是一种合理的方法吗?

为边框的每个部分创建了许多div(如下所示),并根据边框的一部分设置背景图像:http://i.imgur.com/sh6Z8.png

HTML& CSS:http://codeviewer.org/view/code:1e4f

(网络开发和堆栈溢出新手,对不起,如果我做任何非正统的事,谢谢)。

2 个答案:

答案 0 :(得分:0)

你的布局是否流畅?例如它会在宽度/高度增长?如果不会增加宽度,那么就没有理由不能只设置背景图像。

对于你正在做的事情,我不会使用渐变边框,只是坚持背景中的图像。

答案 1 :(得分:0)

所以Tim已经说过了,如果你的网站的宽度是静态的,你可以做类似的事情(事实上,即使css3可能是你的使用案例的好选择,这是非常简单的......)

http://jsfiddle.net/Xtw84/3/ - 这是来自先前的答案,所以边缘不柔软,但想法是相同的。 (无所谓)我还在后台添加了图像,这样你就可以看到它是如何工作的。没有必要..将背景图像切成两半实际上毫无意义。

继承了它的版本。 http://jsfiddle.net/Xtw84/4/


使用css3,我会使用box-shadow执行此操作,只需根据需要扩展阴影。