是否可以使用css3制作渐变边框？

Question

正如标题所述,是否可以在css3中创建渐变边框,如果是,如何？我知道你可以制作渐变背景,并且有很多生成器,但我还没有找到一个为渐变边框创建代码.

Answer 1

1.

嗯..这不是花哨的css3但是有一个可能的解决方案:

之前我做了一个其他的事情,我只是改变了背景网址 #childWrap

http://jsfiddle.net/qD4zd/1/(请注意,渐变不是非常灵活,因为它完成了图像.)

基本的想法是,如果你想要用带有渐变,图案或图像的边框框架,你应该将该元素包装在另一个用作边框的元素中.

2.

更灵活的渐变:您可能想要尝试的另一件事是http://www.css3pie.com并使用外部元素中的渐变背景来创建边框,就像在我的示例jsfiddle中一样.

要么

http://www.colorzilla.com/gradient-editor/

(http://jsfiddle.net/qD4zd/2/)

3.

在第三个注释..第一种方法可以通过使用实际<img>标签变得更灵活,以便您强制图像具有特定的高度和宽度..甚至可以看起来像样.

Answer 2

可以使用CSS3创建渐变阴影边框:

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    -ms-border-radius: 10px;
        border-radius: 10px;

border: 4px solid rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 0 20px #000;
   -moz-box-shadow: inset 0 0 20px #000;
    -ms-box-shadow: inset 0 0 20px #000;
        box-shadow: inset 0 0 20px #000;

实际上,这将创建一个内边的阴影边框,边缘的半径为10px.