是否有可能与css3做一个渐变边框？ [英] Is it possible to make a gradient border with css3?

问题描述

如标题所示，是否可以在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。

好吧，这不是一个可能的解决方案：

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.

或

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.

这篇关于是否有可能与css3做一个渐变边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！