Saya mencoba menerapkan gradien ke perbatasan, saya pikir itu sesederhana melakukan ini:

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

Tetapi ini tidak berhasil.

Apakah ada yang tahu apa cara yang benar untuk melakukan gradien perbatasan?

WebKit sekarang (dan setidaknya Chrome 12) mendukung gradien sebagai gambar tepi:

-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/
Dukungan browser: http://caniuse.com/#search=border-image

alih-alih perbatasan, saya akan menggunakan gradien latar belakang dan padding. terlihat sama, tetapi jauh lebih mudah, lebih didukung.

contoh sederhana:

.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: Anda juga dapat memanfaatkan :beforepemilih seperti yang ditunjukkan @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>

border-image-slice akan memperluas gradien gambar tepi CSS

Ini (seperti yang saya pahami) mencegah pengiris default "gambar" menjadi beberapa bagian - tanpanya, tidak ada yang muncul jika perbatasan berada di satu sisi saja, dan jika itu di sekitar seluruh elemen empat gradien kecil muncul di setiap sudut.

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

Mozilla saat ini hanya mendukung gradien CSS sebagai nilai properti gambar latar belakang, dan juga dalam latar belakang steno.

- 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

Coba ini, berfungsi baik di 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>

Ini adalah retasan, tetapi Anda dapat mencapai efek ini dalam beberapa kasus dengan menggunakan gambar latar belakang untuk menentukan gradien dan kemudian menutupi latar belakang sebenarnya dengan bayangan kotak. Sebagai contoh:

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

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

Coba ini, itu berhasil untuk saya.

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>

Tautannya adalah ke biola https://jsfiddle.net/yash009/kayjqve3/1/ harap ini membantu

Saya setuju dengan szajmon. Satu-satunya masalah dengan jawabannya dan Quentin adalah kompatibilitas lintas-browser.

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 mendukung gradien dalam batas , dan sekarang menerima gradien dalam format Mozilla.

Firefox mengklaim mendukung gradien dalam dua cara:

1. Menggunakan border-image dengan border-image-source
2. Menggunakan warna batas-kanan (kanan / kiri / atas / bawah)

IE9 tidak memiliki dukungan.

Coba contoh di bawah ini:

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

Peretasan lain untuk mendapatkan efek yang sama adalah dengan memanfaatkan beberapa gambar latar belakang, fitur yang didukung di IE9 +, Firefox yang baru, dan sebagian besar peramban berbasis WebKit: http://caniuse.com/#feat=multibackgrounds

Ada juga beberapa opsi untuk menggunakan beberapa latar belakang di IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/

Misalnya, Anda menginginkan batas kiri selebar 5px yang merupakan gradien linier dari biru ke putih. Buat gradien sebagai gambar dan ekspor ke PNG. Buat daftar latar belakang CSS lainnya setelah yang untuk gradien batas kiri:

#kotak {
    Latar Belakang:
        url (/images/theBox-leftBorderGradient.png) tidak boleh diulang,
        ...;
}

Anda dapat menyesuaikan teknik ini ke gradien batas atas, kanan, dan bawah dengan mengubah bagian posisi latar belakang dari backgroundproperti steno.

Berikut adalah jsFiddle untuk contoh yang diberikan: http://jsfiddle.net/jLnDt/

Gradient Borders dari 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; 
}

Untuk dukungan lintas-browser, Anda dapat mencoba juga meniru batas gradien dengan :beforeatau :afterelemen semu, tergantung pada apa yang ingin Anda lakukan.

Contoh untuk Gradient Border

Menggunakan properti css border-image

Penghargaan untuk: gambar-batas di 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>

coba kode ini

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

atau mungkin merujuk ke biola ini: http://jsfiddle.net/necolas/vqnk9/

Berikut cara semi-browser yang bagus untuk memiliki batas gradien yang menghilang setengah jalan. Cukup dengan mengatur color-stop torgba(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>

Penggunaan menjelaskan:

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

Lebih lanjut di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Ada artikel trik css yang bagus tentang ini di sini: https://css-tricks.com/gradient-borders-in-css/

Saya dapat menemukan solusi yang sangat sederhana, elemen tunggal, untuk ini menggunakan beberapa latar belakang dan properti latar belakang.

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

Hal-hal baik tentang pendekatan ini adalah:

1. Itu tidak terpengaruh oleh z-index
2. Ini dapat dengan mudah skala hanya dengan mengubah lebar perbatasan transparan

Lihat itu: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100