可以制作渐变边框吗?

问题描述:

正如标题所述,是否可以在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.