渐变边框用css/html淡化围绕div答案

【问题标题】：Gradient Border fade surrounding div with css/html渐变边框用css/html淡化围绕div
【发布时间】：2011-09-09 07:54:10
【问题描述】：

您好，我试图弄清楚如何创建一个淡入 div 背景颜色的边框，这是我能想到的唯一解决方案。我用谷歌搜索了一下，似乎人们建议使用 CSS3，但有人告诉我它仍然“正在开发中”，并没有在现代浏览器中完全引入，如果我错了，请纠正我，可能是。

无论如何这是我想出的解决方案，有没有更简单的方法或者这是一个合理的方法？

为边框的每个部分创建了多个div（如下），并根据边框的部分设置它们的背景图片：http://i.imgur.com/sh6Z8.png

（网络开发和堆栈溢出的新手，如果我做的事情不正统，请见谅，谢谢）。

【问题讨论】：

【解决方案1】：

正如蒂姆那里已经说过的那样，如果你的网站的宽度是静态的，你可以做这样的事情（事实上，即使 css3 可能是你的用例的好选择，这非常简单......）

http://jsfiddle.net/Xtw84/3/ - 这是来自先前的答案，所以边缘不柔软，但想法是一样的。（没关系）我还在背景中添加了图像，这样你就可以看到它是如何工作的。没有必要..实际上将背景图像切成两半是没有意义的。

这里有一个更精简的版本。 http://jsfiddle.net/Xtw84/4/

使用 css3，我会使用 box-shadow 来做到这一点，并根据需要扩展阴影。

【讨论】：

【解决方案2】：

您的布局会变得流畅吗？例如它会在宽度/高度上增长吗？如果它不增加宽度，那么你没有理由不能只设置背景图像。

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

【讨论】：

它不会变宽，但会变高，这就是为什么我只使用“100%”，这样它就会随着浏览器的高度而变化。如果它的宽度增加，我不能将顶部边框和宽度边框设置为容器的 100%，这样它也会随着浏览器的变化而变化吗？感谢您的快速回复。
@LylatWars 那么，即使实际内容高度没有达到底部，您是否希望内容区域始终“拉伸”到底部？在我的回答中，这与蒂姆的回答或多或少相同，但举了一个例子。在其中，内容区域确实具有流动的高度，并且它的高度由内容的数量决定。
@Lollero，啊，我明白了，抱歉有点慢，将它分成 3 个图像可以处理流体高度，我假设我这样做的方式也可以处理流体宽度，但大多数没有真正需要具有流体宽度的时间......好的，谢谢。
@LylatWars 是的，就是这样。