CSS 渐变边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2717127/
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
Gradient borders
提问by Mark
I'm trying to apply a gradient to a border, I thought it was as simple as doing this:
我正在尝试将渐变应用于边框，我认为这样做很简单：
border-color: -moz-linear-gradient(top, #555555, #111111);
But this does not work.
但这不起作用。
Does anyone know what is the correct way to do border gradients?
有谁知道做边框渐变的正确方法是什么？
采纳答案by Tony
WebKit now (and Chrome 12 at least) supports gradients as border image:
WebKit 现在（至少是 Chrome 12）支持渐变作为边框图像：
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
Browser support: http://caniuse.com/#search=border-image
Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
浏览器支持：http: //caniuse.com/#search=border-image
回答by szajmon
instead of borders, I would use background gradients and padding. same look, but much easier, more supported.
而不是边框，我会使用背景渐变和填充。相同的外观，但更容易，更受支持。
a simple example:
一个简单的例子：
.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}
.g > div { background: #fff; }<div class="g">
<div>bla</div>
</div>EDIT: You can also leverage the :beforeselector as @WalterSchwarz pointed out:
编辑：您还可以利用:before@WalterSchwarz 指出的选择器：
body {
padding: 20px;
}
.circle {
width: 100%;
height: 200px;
background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
border-radius: 100%;
position: relative;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.circle::before {
border-radius: 100%;
content: '';
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
padding: 10px;
width: 100%;
height:100%;
top: -10px;
left: -10px;
position:absolute;
z-index:-1;
}<div class="circle">Test</div>回答by Dave Everitt
border-image-slicewill extend a CSS border-image gradient
border-image-slice将扩展 CSS 边框图像渐变
This (as I understand it) prevents the default slicing of the "image" into sections - without it, nothing appears if the border is on one side only, and if it's around the entire element four tiny gradients appear in each corner.
这（据我所知）可以防止将“图像”默认切片成多个部分 - 没有它，如果边框仅在一侧，则不会出现任何内容，如果边框位于整个元素周围，则每个角落都会出现四个微小的渐变。
border-bottom: 6px solid transparent;
border-image: linear-gradient(to right, red , yellow);
border-image-slice: 1;
回答by Quentin
Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background.
Mozilla 目前只支持 CSS 渐变作为 background-image 属性的值，以及在速记背景中。
— https://developer.mozilla.org/en/CSS/-moz-linear-gradient
— https://developer.mozilla.org/en/CSS/-moz-linear-gradient
Example 3 - Gradient Borders
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;
回答by GibboK
Try this, works fine on web-kit
试试这个，在 web-kit 上工作正常
.border {
width: 400px;
padding: 20px;
border-top: 10px solid #FFFF00;
border-bottom:10px solid #FF0000;
background-image:
linear-gradient(#FFFF00, #FF0000),
linear-gradient(#FFFF00, #FF0000)
;
background-size:10px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}<div class="border">Hello!</div>回答by Nate Smith
It's a hack, but you can achieve this effect in some cases by using the background-image to specify the gradient and then masking the actual background with a box-shadow. For example:
这是一个技巧，但在某些情况下，您可以通过使用 background-image 指定渐变，然后使用 box-shadow 掩盖实际背景来实现此效果。例如：
p {
display: inline-block;
width: 50px;
height: 50px;
/* The background is used to specify the border background */
background: -moz-linear-gradient(45deg, #f00, #ff0);
background: -webkit-linear-gradient(45deg, #f00, #ff0);
/* Background origin is the padding box by default.
Override to make the background cover the border as well. */
-moz-background-origin: border;
background-origin: border-box;
/* A transparent border determines the width */
border: 4px solid transparent;
border-radius: 8px;
box-shadow:
inset 0 0 12px #0cc, /* Inset shadow */
0 0 12px #0cc, /* Outset shadow */
inset -999px 0 0 #fff; /* The background color */
}
From: http://blog.nateps.com/the-elusive-css-border-gradient
回答by Yash009
Try this, it worked for me.
试试这个，它对我有用。
div{
border-radius: 20px;
height: 70vh;
overflow: hidden;
}
div::before{
content: '';
display: block;
box-sizing: border-box;
height: 100%;
border: 1em solid transparent;
border-image: linear-gradient(to top, red 0%, blue 100%);
border-image-slice: 1;
}<div></div>The link is to the fiddle https://jsfiddle.net/yash009/kayjqve3/1/hope this helps
链接是小提琴 https://jsfiddle.net/yash009/kayjqve3/1/希望这有帮助
回答by Vijay Chauhan
Try the below example:
试试下面的例子：
.border-gradient {
border-width: 5px 5px 5px 5px;
border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
border-image-slice: 9;
border-style: solid;
}
回答by Scotty
I agree with szajmon. The only problem with his and Quentin's answers is cross-browser compatibility.
我同意 szajmon。他和 Quentin 的答案唯一的问题是跨浏览器兼容性。
HTML:
HTML：
<div class="g">
<div>bla</div>
</div>
CSS:
CSS：
.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}
.g > div { background: #fff; }
回答by SamGoody
Webkit supports gradients in borders, and now accepts the gradient in the Mozilla format.
Webkit 支持边框渐变，现在接受 Mozilla 格式的渐变。
Firefox claims to support gradients in two ways:
Firefox 声称以两种方式支持渐变：
IE9 has no support.
IE9 不支持。
