CSS 是否可以制作渐变边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6619818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to make a gradient border?
提问by Vasseurth
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.
正如标题所述，是否可以在 CSS3 中制作渐变边框，如果可以，如何制作？我知道你可以制作渐变背景，而且有很多生成器可以用来制作渐变背景，但我还没有找到一种可以为渐变边框创建代码的生成器。
采纳答案by Joonas
1.
1.
Well.. this is no fancy css3 but heres one possible solution:
嗯.. 这不是花哨的 css3，而是一种可能的解决方案：
I made this example for something else before and i just changed the background url of #childWrap
我之前为别的东西做了这个例子，我只是改变了背景网址 #childWrap
http://jsfiddle.net/qD4zd/1/( note that the gradient isnt very flexible as it is done with images. )
http://jsfiddle.net/qD4zd/1/（注意渐变不是很灵活，因为它是用图像完成的。）
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.
基本思想是，如果您想用渐变、图案或只是图像的边框来框住元素，则应将该元素包裹在另一个将用作边框的元素中。
2.
2.
A little more flexible gradient: Another thing you might want to try is http://www.css3pie.comand use the gradient background in outer element to create a border like in my example jsfiddle.
更灵活的渐变：您可能想尝试的另一件事是http://www.css3pie.com并使用外部元素中的渐变背景来创建边框，就像我的示例 jsfiddle 一样。
OR
或者
http://www.colorzilla.com/gradient-editor/
http://www.colorzilla.com/gradient-editor/
( http://jsfiddle.net/qD4zd/2/)
( http://jsfiddle.net/qD4zd/2/)
3.
3.
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.
第三个注意事项..第一种方法可以通过使用实际<img>标签变得更灵活，以便您强制图像具有特定的高度和宽度..甚至可以看起来不错。
回答by Endre Simo
Here is a possibility to create a gradient shadow border with CSS3:
这是一种使用 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;
Practically this will create an inner shadow border with 10px radius at the edges.
实际上，这将在边缘创建一个半径为 10px 的内部阴影边框。
回答by Suren Neware
Nothing to do much just add following code:
没什么可做的，只需添加以下代码：
border-image: linear-gradient(to bottom, black 0%, white 100%);
/* border-image-slice: 1;*/
just add above code to the element and border-image-slice property will set the inner offsets of the element.
只需将上面的代码添加到元素和 border-image-slice 属性将设置元素的内部偏移量。
回答by Ted
Border with linear gradient.
带线性渐变的边框。
HTML
HTML
<div id="input_parameters">
...Some HTML...
</div>
CSS
CSS
#input_parameters {
border: 10px solid transparent;
border-image: linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);
-webkit-border-image: -webkit-linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);
border-image-slice: 1;
}
回答by Fabien Snauwaert
Here's a solution that creates a colorful gradient border, like you can see at the top of sites such as Gumroad or Vimeo, e.g.:
这是一个创建彩色渐变边框的解决方案，就像您在 Gumroad 或 Vimeo 等网站的顶部看到的那样，例如：
<div class="u-border-top-rainbow">Lorem ipsum fu fu ma li ma coco go yo.</div>
.u-border-top-rainbow {
border-style: solid;
border-width: 30px 0 0 0;
/* For a gradient repeated 3 times */
border-image-source: repeating-linear-gradient(to right,
hsla( 8, 78%, 63%, 1.00 ) 00.00%,
hsla( 8, 78%, 63%, 1.00 ) 03.03%,
hsla( 9, 85%, 58%, 1.00 ) 03.03%,
hsla( 9, 85%, 58%, 1.00 ) 06.06%,
hsla( 12, 100%, 47%, 1.00 ) 06.06%,
hsla( 12, 100%, 47%, 1.00 ) 09.09%,
hsla( 352, 70%, 47%, 1.00 ) 09.09%,
hsla( 352, 70%, 47%, 1.00 ) 12.12%,
hsla( 355, 76%, 38%, 1.00 ) 12.12%,
hsla( 355, 76%, 38%, 1.00 ) 15.15%,
hsla( 2, 78%, 32%, 1.00 ) 15.15%,
hsla( 2, 78%, 32%, 1.00 ) 18.18%,
hsla( 183, 100%, 30%, 1.00 ) 18.18%,
hsla( 183, 100%, 30%, 1.00 ) 21.21%,
hsla( 183, 95%, 27%, 1.00 ) 21.21%,
hsla( 183, 95%, 27%, 1.00 ) 24.24%,
hsla( 183, 100%, 22%, 1.00 ) 24.24%,
hsla( 183, 100%, 22%, 1.00 ) 27.27%,
hsla( 43, 92%, 54%, 1.00 ) 27.27%,
hsla( 43, 92%, 54%, 1.00 ) 30.30%,
hsla( 38, 100%, 48%, 1.00 ) 30.30%,
hsla( 38, 100%, 48%, 1.00 ) 33.33%
);
border-image-slice: 1;
}
Codepen: Colorful CSS gradient border, à la Gumroad or Vimeo
Codepen：彩色 CSS 渐变边框，à la Gumroad 或 Vimeo
The gradient couldbe written in half the size with the double stop notation, in this fashion:
梯度可以用双停止符号写成一半大小，以这种方式：
background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
…unfortunately, such syntax is not supported by Safari as of yet.
……不幸的是，目前 Safari 还不支持这种语法。
回答by al-bulat
You can try this:
你可以试试这个：
div {
width: 170px;
height: 48px;
border-radius: 24px;
border-style: solid;
border-width: 2px;
border-image-source: linear-gradient(to bottom, #fff042, #ff5451);
border-image-slice: 1;
background-image: linear-gradient(to bottom, #f9e6e6, #c5e0c3), linear-gradient(to bottom, #fff042, #ff5451);
background-origin: border-box;
background-clip: content-box, border-box;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}<div>button</div>回答by Anthony
Just use ::before
只需使用 ::before
.card::before{
content: '';
width: 100%;
position: absolute;
height: 5px;
top:0;
left: 0;
border-radius:5px 5px 0 0;
background-color: hsl(195, 100%, 50%);
}
回答by cgvector
may be other work for you but i have very simple tips for you just replace background-image to border-image like
可能对您来说是其他工作，但我有非常简单的提示，只需将背景图像替换为边框图像即可
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
background-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
background-color:#124f7e;
border-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
border-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
border-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
border-color:#124f7e;
回答by Fergus Barker
here is an example of a gradient border that would work under Firefox:
这是一个适用于 Firefox 的渐变边框示例：
#gradbor {
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
}
Try something like that in your CSS for it to work.
在你的 CSS 中尝试类似的东西让它工作。
EDIT:I'm not sure if it will work at all on other browsers.
编辑：我不确定它是否可以在其他浏览器上工作。
回答by Nightfirecat
See the answer to this question: CSS3 Gradient Borders.
请参阅此问题的答案：CSS3 Gradient Borders。
Basically, it will only work in Firefox at the moment. You could just use pseudo-elements positioned behind the actual element with gradients on them to create a similar effect, though.
基本上，它目前只能在 Firefox 中工作。不过，您可以只使用位于实际元素后面的带有渐变的伪元素来创建类似的效果。
