Tôi đang cố gắng áp dụng một gradient cho một đường viền, tôi nghĩ nó đơn giản như việc này:

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

Dường như không hiệu quả.

Có ai biết cách chính xác để làm gradient biên giới là gì?

WebKit ngay bây giờ (và ít nhất là Chrome 12) hỗ trợ độ dốc dưới dạng hình ảnh viền:

-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-gradrons/
Hỗ trợ trình duyệt: http://caniuse.com/#search=border-image

thay vì viền, tôi sẽ sử dụng độ dốc nền và phần đệm. Nhìn giống nhau, nhưng dễ dàng hơn nhiều, được hỗ trợ nhiều hơn.

một ví dụ đơn giản:

.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: Bạn cũng có thể tận dụng :beforebộ chọn như @WalterSchwarz đã chỉ ra:

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>

border-image-slice sẽ mở rộng một gradient hình ảnh viền CSS

Điều này (theo tôi hiểu) ngăn chặn việc cắt "hình ảnh" mặc định thành các phần - không có nó, không có gì xuất hiện nếu đường viền chỉ ở một bên và nếu xung quanh toàn bộ phần tử thì bốn gradient nhỏ xuất hiện ở mỗi góc.

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

Mozilla hiện chỉ hỗ trợ độ dốc CSS làm giá trị của thuộc tính hình ảnh nền, cũng như trong nền tốc ký.

- 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/bnings.htmlm

Hãy thử điều này, hoạt động tốt trên 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>

Đó là một hack, nhưng bạn có thể đạt được hiệu ứng này trong một số trường hợp bằng cách sử dụng hình nền để chỉ định độ dốc và sau đó che nền thực tế bằng bóng hình hộp. Ví dụ:

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 */
}

Từ: http://blog.nateps.com/the-elusive-css-border-gradient

Hãy thử điều này, nó làm việc cho tôi.

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>

Liên kết là đến fiddle https://jsfiddle.net/yash009/kayjqve3/1/ hy vọng điều này sẽ giúp

Tôi đồng ý với szajmon. Vấn đề duy nhất với câu trả lời của anh ấy và Quentin là khả năng tương thích giữa nhiều trình duyệt.

HTML:

<div class="g">
    <div>bla</div>
</div>

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

Webkit hỗ trợ độ dốc trong đường viền và hiện chấp nhận độ dốc ở định dạng Mozilla.

Firefox tuyên bố hỗ trợ độ dốc theo hai cách:

1. Sử dụng hình ảnh viền với nguồn hình ảnh đường viền
2. Sử dụng màu viền phải (phải / trái / trên / dưới)

IE9 không có hỗ trợ.

Hãy thử ví dụ dưới đây:

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

Một cách hack khác để đạt được hiệu quả tương tự là sử dụng nhiều ảnh nền, một tính năng được hỗ trợ trong IE9 +, Firefox mới và hầu hết các trình duyệt dựa trên WebKit: http://caniuse.com/#feat=multibackgrounds

Ngoài ra còn có một số tùy chọn để sử dụng nhiều nền trong IE6-8: http://www.beyondhyper.com/css3-multipl-backgrounds-in-non-supportive-browsers/

Ví dụ: giả sử bạn muốn đường viền bên trái rộng 5px là một gradient tuyến tính từ màu xanh sang màu trắng. Tạo gradient dưới dạng hình ảnh và xuất thành PNG. Liệt kê bất kỳ nền CSS nào khác sau nền cho gradient viền trái:

#cái hộp {
    lý lịch:
        url (/images/theBox-leftBorderGradient.png) không lặp lại,
        ...;
}

Bạn có thể điều chỉnh kỹ thuật này với độ dốc đường viền trên, phải và dưới bằng cách thay đổi phần vị trí nền của thuộc tính tốc backgroundký.

Dưới đây là một jsFiddle cho ví dụ đã cho: http://jsfiddle.net/jLnDt/

Đường viền Gradient từ Css-Tricks: http://css-tricks.com/examples/GradientBorder/

.multbg-top-to-bottom {
  border-top: 3px solid black;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image:
      -moz-linear-gradient(#000, transparent),
      -moz-linear-gradient(#000, transparent);
  background-image:
      -o-linear-gradient(#000, transparent),
      -o-linear-gradient(#000, transparent);
  background-image: 
      linear-gradient(#000, transparent),
      linear-gradient(#000, transparent);
  -moz-background-size: 3px 100%;
  background-size: 3px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat; 
}

Để hỗ trợ nhiều trình duyệt, bạn có thể thử bắt chước một đường viền gradient với :beforehoặc :aftercác phần tử giả, tùy thuộc vào những gì bạn muốn làm.

Ví dụ cho Gradient Border

Sử dụng thuộc tính css hình ảnh viền

Tín dụng cho: hình ảnh viền trong Mozilla

.grad-border {
  height: 1px;
  width: 85%;
  margin: 0 auto;
  display: flex;
}
.left-border, .right-border {
  width: 50%;
  border-bottom: 2px solid #695f52;
  display: inline-block;
}
.left-border {
  border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
}
.right-border {
  border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
}

<div class="grad-border">
  <div class="left-border"></div>
  <div class="right-border"></div>
</div>

thử mã này

.gradientBoxesWithOuterShadows { 
height: 200px;
width: 400px; 
padding: 20px;
background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
}

hoặc có thể tham khảo câu đố này: http://jsfiddle.net/necolas/vqnk9/

Đây là một cách bán đa trình duyệt đẹp để có viền gradient mờ dần xuống một nửa. Đơn giản bằng cách đặt điểm dừng màu thànhrgba(0, 0, 0, 0)

.fade-out-borders {
min-height: 200px; /* for example */

-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

<div class="fade-out-border"></div>

Cách sử dụng giải thích:

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                              \---------------------------------/ \----------------------------/
                                Definition of the gradient line         List of color stops  

Xem thêm tại đây: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Có một bài viết thủ thuật css hay về vấn đề này tại đây: https://css-tricks.com/gradient-bnings-in-css/

Tôi đã có thể đưa ra một giải pháp đơn giản, đơn giản, cho giải pháp này bằng cách sử dụng nhiều nền và thuộc tính gốc.

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

Những điều tốt đẹp về phương pháp này là:

1. Nó không bị ảnh hưởng bởi chỉ số z
2. Nó có thể mở rộng dễ dàng chỉ bằng cách thay đổi độ rộng của đường viền trong suốt

Hãy xem thử: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100