чистый CSS линейный градиент границы

Question

Использование чистого CSS, как создать границу, которая является вертикальным, линейным градиентом?

Я хочу использовать -moz-linear-gradient, а не файл изображения. Единственный браузер, который мне нужен для поддержки этого проекта, будет Firefox.

Я хочу, чтобы граница была толщиной 10px с радиусом угла 20px. Я также хочу, чтобы граница была линейным градиентом с оранжевым цветом (см. Ниже), верхний затухающий до серого внизу.

#box { 
    border: 10px #808080 solid; 
    -moz-border-radius: 20px; 
    /* -moz-linear-gradient: ??? #F58154 #CCCCCC ???; */ 
} 

Я рассмотрел другие вопросы, не видя хороший ответ (как this статьи и this исх там.) Я принимаю ответ, который использует HTML/CSS без изображений, даже если разметка содержит Дивы слои, необходимые для добиться этого эффекта. Благодаря!

Answer 1

Если вы пытаетесь сделать границе градиент вам нужно подделать. Очевидно, вам нужно будет отрегулировать размер div и тип контента, который вы вкладываете в него. Но это должно дать вам суть.

HTML-

<div id="outer-box"> 
    <div id="inner-box"> 
     <p>Some Text</p> 
    </div> 
</div> 

CSS-

#outer-box { 
      padding: 10px; 
      -moz-border-radius: 20px; 
      background: -moz-linear-gradient(top, #f58154, #CCC); 
     } 

    #inner-box { 
      -moz-border-radius: 20px; 
      background: #fff; 
     } 

EDIT: контрейлерных о дополнительном решении Дилан Hayes. Вы также можете использовать радиальный градиент, чтобы выполнить одно и то же. Опять же нужно было бы изменить настройки по размеру элементов.

#outer-box { 
       padding: 10px; 
       height: 200px; 
       width: 200px; 
       -moz-border-radius: 20px; 
       background: -moz-radial-gradient(#CCC, #f58154); 
      } 

    #inner-box { 
       height: 200px; 
       width: 200px; 
       -moz-border-radius: 20px; 
       background: #fff; 
      } 

Answer 2

Я считаю, что это должно сделать трюк для вас. Вы должны установить свойство фона для градиента.

#box { 
    border: 10px #808080 solid; 
    -moz-border-radius: 20px; 
    background: -moz-linear-gradient(top, #f58154, #CCC); 
} 

EDIT: Я прочитал вопрос неправильно, я ответил на ваш вопрос, если вы хотите градиент фона. Решение Брайана Хэва ниже хорошо, если вы хотите, чтобы прямой линейный градиент на вашей границе сверху вниз. Если вы хотите, внешний/внутренний градиент со всех сторон, вы хотели бы сделать что-то вроде

#box { 
    border: 10px solid black; 
    -moz-border-radius: 20px; 

    /* Gradient on all sides*/ 
    -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; 

    background: black; 
    height: 200px; 
    width: 200px; 
} 

Answer 3

Это можно сделать и с HTML5. В HTML5 вы можете сделать холст и нарисовать его с помощью JS -> gradient.
Учебное пособие найдено here.