简体繁体 English

渐变边框使用CSS / HTML淡入淡出周围的div

[英]Gradient Border fade surrounding div with css/html

原文 2011-09-09 07:54:10 0 2 html/ css/ border/ gradient

Hi I was trying to figure out how to create a border that fades into the background colour of a div and this is the only solution I could come up with. 嗨，我正试图弄清楚如何创建一个逐渐淡入div背景颜色的边框，这是我唯一能想到的解决方案。 I've googled around and it seems people suggest CSS3 but I was told it was still "under development" and not fully introduced in modern browsers, correct me if I'm wrong, probably am. 我到处搜索，似乎有人建议使用CSS3，但有人告诉我它仍在“开发中”，并且没有在现代浏览器中完全引入，如果我错了，请更正我，大概是。

Anyway this is the solution I came up with, are there simpler ways of doing it or is this a reasonable approach? 无论如何，这是我想出的解决方案，是有更简单的方法吗？还是这是一种合理的方法？

Created numerous divs for each part of the border (as below), and set their background image according to the part of the border: http://i.imgur.com/sh6Z8.png 为边框的每个部分创建了许多div（如下所示），并根据边框的部分设置了背景图片： http : //i.imgur.com/sh6Z8.png

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

(New to webdevelopment and stack overflow, sorry if I'm doing anything unorthodox, thanks). （对于Web开发和堆栈溢出来说是新手，对不起，如果我做任何非正统的事情，谢谢）。

2 个解决方案

Is your layout going to be fluid? 您的布局会流畅吗？ eg it will grow in width/height? 例如，它的宽度/高度会增加吗？ If it isnt going to grow in width, then there is no reason that you can not just set the background image. 如果宽度不会增加，则没有理由不能仅设置背景图像。

For what you are doing, I wouldn't use gradient borders and just stick with the images in the background. 对于您正在做的事情，我不会使用渐变边框，而只会保留背景中的图像。

So as Tim there already said it, if the width of your website is static, you can do something like that ( In fact even if css3 may be good option for your usage case This is super simple... ) 因此，正如Tim在上面已经说过的那样，如果您的网站宽度是静态的，则可以执行类似的操作（实际上，即使css3对于您的使用情况而言是个不错的选择，这也非常简单...）

http://jsfiddle.net/Xtw84/3/ - this is from a prior answer so the edges are not soft but the idea is the same. http://jsfiddle.net/Xtw84/3/-这是来自先前的答案，因此边缘并不柔软，但是想法是相同的。 ( doesnt matter ) I also added image in the background so you can see how that would work. （无所谓）我还在后台添加了图像，以便您可以看到它如何工作。 Theres no need.. actually makes no sense to slice the background image in half. 完全没有必要将背景图像切成两半。

Heres a bit more stripped down version of it. 继承人的精简版。 http://jsfiddle.net/Xtw84/4/ http://jsfiddle.net/Xtw84/4/

With css3 i would do this with box-shadow and just expand the shadow as much as needed. 使用css3时，我将使用盒形阴影执行此操作，并根据需要扩展阴影。