Можно ли сделать градиентную границу?

Question

Как гласит заголовок, возможно ли создать градиентную границу в CSS3 и если да, то как? Я знаю, что вы можете создавать градиентные фоны, и для этого есть много генераторов, но мне еще предстоит найти тот, который создает код для градиентной границы.

Answer 1

Вот возможность создать градиентную теневую границу с помощью CSS3:

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    -ms-border-radius: 10px;
        border-radius: 10px;

border: 4px solid rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 0 20px #000;
   -moz-box-shadow: inset 0 0 20px #000;
    -ms-box-shadow: inset 0 0 20px #000;
        box-shadow: inset 0 0 20px #000;

Практически это создаст внутреннюю теневую границу с радиусом 10 пикселей по краям.

Answer 2

1.

Хорошо ... это не фантастика css3, но вот одно из возможных решений:

Я сделал этот пример для чего-то еще, и я просто изменил фоновый URL #childWrap

http://jsfiddle.net/qD4zd/1/ (обратите внимание, что градиент не очень гибкий, как это делается с изображениями.)

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

---

2

Немного более гибкий градиент. Еще одна вещь, которую вы можете попробовать - это http://www.css3pie.com и использовать градиентный фон во внешнем элементе для создания границы, как в моем примере jsfiddle.

OR

http://www.colorzilla.com/gradient-editor/

(http://jsfiddle.net/qD4zd/2/)

---

3

На третьем примечании. Первый метод можно превратить в более гибкий с использованием фактического тега <img>, так что вы заставите изображение иметь определенную высоту и ширину ... может даже выглядеть прилично.

Answer 3

Ничего не нужно делать, просто добавьте следующий код:

 border-image: linear-gradient(to bottom, black 0%, white 100%);
  /* border-image-slice: 1;*/

, просто добавьте приведенный выше код к элементу, и свойство border-image-slice установит внутренние смещения элемента.

Answer 4

Граница с линейным градиентом.

HTML

<div id="input_parameters">
        ...Some HTML...
</div>

CSS

#input_parameters {
border: 10px solid transparent;

border-image: linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

-webkit-border-image: -webkit-linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

border-image-slice: 1;
}

Answer 5

Вот решение, которое создает красочную градиентную границу , как вы можете видеть в верхней части сайтов, таких как Gumroad или Vimeo, например:

<div class="u-border-top-rainbow">Lorem ipsum fu fu ma li ma coco go yo.</div>

.u-border-top-rainbow {
  border-style: solid;
  border-width: 30px 0 0 0;

   /* For a gradient repeated 3 times */
  border-image-source: repeating-linear-gradient(to right,
    hsla(   8,  78%, 63%, 1.00 ) 00.00%,
    hsla(   8,  78%, 63%, 1.00 ) 03.03%,
    hsla(   9,  85%, 58%, 1.00 ) 03.03%,
    hsla(   9,  85%, 58%, 1.00 ) 06.06%,
    hsla(  12, 100%, 47%, 1.00 ) 06.06%,
    hsla(  12, 100%, 47%, 1.00 ) 09.09%,
    hsla( 352,  70%, 47%, 1.00 ) 09.09%,
    hsla( 352,  70%, 47%, 1.00 ) 12.12%,
    hsla( 355,  76%, 38%, 1.00 ) 12.12%,
    hsla( 355,  76%, 38%, 1.00 ) 15.15%,
    hsla(   2,  78%, 32%, 1.00 ) 15.15%,
    hsla(   2,  78%, 32%, 1.00 ) 18.18%,
    hsla( 183, 100%, 30%, 1.00 ) 18.18%,
    hsla( 183, 100%, 30%, 1.00 ) 21.21%,
    hsla( 183,  95%, 27%, 1.00 ) 21.21%,
    hsla( 183,  95%, 27%, 1.00 ) 24.24%,
    hsla( 183, 100%, 22%, 1.00 ) 24.24%,
    hsla( 183, 100%, 22%, 1.00 ) 27.27%,
    hsla(  43,  92%, 54%, 1.00 ) 27.27%,
    hsla(  43,  92%, 54%, 1.00 ) 30.30%,
    hsla(  38, 100%, 48%, 1.00 ) 30.30%,
    hsla(  38, 100%, 48%, 1.00 ) 33.33%
  );

  border-image-slice: 1;
}

Codepen: Красочная граница градиента CSS, по Gumroad или Vimeo

Градиент может записать в два раза меньше с двойной нотацией следующим образом:

background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

… к сожалению, такой синтаксис пока не поддерживается Safari.

Answer 6

Вместо этого я использовал элемент span для использования в качестве границы, установив его свойство css. ниже мой код

<div id="main_container">
        <div class="tl"></div>
        <div class="tr"></div>
        <div class="bl"></div>
        <div class="br"></div>
        <span class="borderH"></span>
        <span class="borderV"></span>
</div>

n вот мой css -

   #main_container{
    position:relative;
    width:480px;
    height:480px;
    background:#f9f9f9;
    border:1px solid #ff0000;
    left:20%;
    top:100px;
}
.tl { position: absolute; top: 0; left: 0; /*background: #ff0000;*/ border-right:1px none #000;width:50%;height:50%;  }
.tr { position: absolute; top: 0; left: 50%;/*background: blue;*/ border-bottom:1px none #000;width:50%;height:50%;}
.bl { position: absolute; top: 50%; left: 0; /*background: yellow;*/ border-top:1px none #000;width:50%;height:50%; }
.br { position: absolute; top: 50%; left: 50%; /*background: #80ff80;*/border-left:1px none #000;width:50%;height:50%; } 
.borderH{
    position: absolute; left: 0; top: 50%;height:1px;width:100%;
    background: -webkit-linear-gradient(left, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(right, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}
.borderV{
    position: absolute; top: 0; left: 50%;width:1px;height:100%; 
    background: -webkit-linear-gradient(top, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(bottom, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}

этот код будет генерировать вывод, подобный этому https://drive.google.com/file/d/0B2sRswnexZtfUVlTM0t2dWI3cjA/edit?usp=sharing

Answer 7

это актуальное решение для градиентов границы.пожалуйста, посмотрите это видео, оно позволило мне сделать это на моем сайте

Сказка о градиентах-видео

Answer 8

может быть другой работой для вас, но у меня есть очень простые советы для вас, просто замените background-image на border-image как

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
background-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
background-color:#124f7e;

border-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
border-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
border-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
border-color:#124f7e;

Answer 9

См. Ответ на этот вопрос: CSS3 Градиентные границы .

В основном, это будет работать только в Firefox на данный момент.Вы можете просто использовать псевдоэлементы, расположенные позади фактического элемента с градиентами на них, чтобы создать аналогичный эффект.

Answer 10

Вот пример градиентной границы, которая будет работать под Firefox:

#gradbor {
    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;
}

Попробуйте что-то подобное в вашем CSS, чтобы оно заработало.

РЕДАКТИРОВАТЬ: Я не уверен, будет ли он вообще работать в других браузерах.