чистый CSS линейный градиент границы - PullRequest
Новая
       17

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

3 голосов
/ 15 марта 2012

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 15 марта 2012

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

#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;
}
1 голос
/ 15 марта 2012

Если вы пытаетесь сделать градиент градиентом, вам нужно его подделать.Очевидно, вам нужно будет отрегулировать размер 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;
        }

РЕДАКТИРОВАТЬ: Для дополнительного решения Дилан Хейс.Вы также можете использовать радиальный градиент, чтобы выполнить то же самое.Снова нужно будет настроить в зависимости от размера элементов. 

#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;
          }
0 голосов
/ 15 марта 2012

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

...