可以制作渐变边框吗?
正如标题所述,是否可以在CSS3中制作渐变边框,如果可以,怎么做? 我知道您可以制作渐变背景,并且有很多生成器,但是我还没有找到为渐变边界创建代码的生成器.
As the title states, is it possible to make a gradient border in CSS3 and if so how? I know that you can make gradient backgrounds and there are many generators for that, but I am yet to find one that creates the code for a gradient border.
1.
嗯..这不是花哨的css3,但这是一种可能的解决方案:
1.
Well.. this is no fancy css3 but heres one possible solution:
我之前为其他示例制作了这个示例,而我只是更改了#childWrap
I made this example for something else before and i just changed the background url of #childWrap
http://jsfiddle.net/qD4zd/1/(请注意,渐变并不十分灵活,就像处理图片一样.)
http://jsfiddle.net/qD4zd/1/ ( note that the gradient isnt very flexible as it is done with images. )
基本思想是,如果要使用带有渐变,图案或仅图像边界的元素进行构图,则应将该元素包装在另一个将用作边界的元素内.
Basic idea is that if you have element that you want to frame with a border with a gradient, pattern or just image you should wrap that element inside another which you will use as the border.
更加灵活的渐变:您可能要尝试的另一件事是 http://www.css3pie.com 并使用外部元素中的渐变背景来创建边框,就像我的示例jsfiddle中一样.
A little more flexible gradient: Another thing you might want to try is http://www.css3pie.com and use the gradient background in outer element to create a border like in my example jsfiddle.
OR
http://www.colorzilla.com/gradient-editor/
( http://jsfiddle.net/qD4zd/2/)
第三点.通过使用实际的<img>
标签,第一种方法可以变得更加灵活,以便您将图像强制为特定的高度和宽度.甚至看起来还不错.
On a third note.. The first method could be made into more flexible one by using actual <img>
tag so that you force the image to be specific height and width.. could even look decent.