渐变边框

Question

我正在尝试将渐变应用到边框,我认为这样做很简单:

border-color: -moz-linear-gradient(top, #555555, #111111);

但这不起作用.

有谁知道边界渐变的正确方法是什么？

Answer 1

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/
浏览器支持:http://caniuse.com/#search=border-image

Answer 2

而不是边框​​,我会使用背景渐变和填充.相同的外观,但更容易,更支持.

一个简单的例子:

.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>

编辑:你也可以利用: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>

Answer 3

border-image-slice 将扩展CSS边框图像渐变

这(据我所知)可以防止将"图像"默认切片为部分 - 没有它,如果边框仅在一侧,则不会出现任何内容,如果它位于整个元素周围,则每个角落会出现四个微小的渐变.

  border-bottom: 6px solid transparent;
  border-image: linear-gradient(to right, red , yellow);
  border-image-slice: 1;

Answer 4

Mozilla目前仅支持CSS渐变作为background-image属性的值,以及简写背景中的值.

- 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; 

- http://www.cssportal.com/css3-preview/borders.htm

Answer 5

试试这个,在网络工具包上运行正常

.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>

Answer 6

您可以在不删除背景、背景剪辑和背景原点的边框半径的情况下实现此目的：

<style>
.border-gradient-rounded {
  /* Border */
  border: 4px solid transparent;
  border-radius: 20px;
  background: 
    linear-gradient(to right, white, white), 
    linear-gradient(to right, red , blue); 
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  
  /* Other styles */
  width: 100px;
  height: 40px;
  padding: 12px;
}
</style>

<div class="border-gradient-rounded">
  Content
</div>

基本上，这会将白色背景定位在渐变背景上，从内边框剪切白色背景，并从外边框剪切渐变背景。这就是为什么您需要将边界定义为solid transparent。

归功于此 dev.to 帖子中的方法 2 。

Answer 7

这是一个黑客攻击,但是在某些情况下你可以通过使用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 */
}

来自:http://blog.nateps.com/the-elusive-css-border-gradient

Answer 8

试试这个，它对我有用。

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>

该链接是小提琴 https://jsfiddle.net/yash009/kayjqve3/1/

Answer 9

试试下面的例子：

.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;
}