Градиентные границы

Question

Я пытаюсь применить градиент к границе, я думал, что это так же просто, как сделать это:

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

Но это не работает.

Кто-нибудь знает, как правильно делать градиенты границ?

Answer 1

Попробуйте, у меня это сработало.

.yourDivClass {
    border: 1px solid transparent;
    border-image: linear-gradient(to top, #3a4ed5 0%, #f2f2f2 100%);
    border-image-slice: 1;
}

Ссылка на скрипку https://jsfiddle.net/yash009/kayjqve3/1/ надеюсь, это поможет

Answer 2

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

Answer 3

Здесь есть хорошая статья о трюках css: https://css -tricks.com / Gradient-bound-in-css /

Мне удалось придумать довольно простое, одноэлементное решение для этого, используя несколько фонов и свойство background-origin.

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

Преимущества этого подхода:

1. Это не зависит от z-index
2. Можно легко масштабировать, просто меняя ширину прозрачной рамки

Проверьте это: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100

Answer 4

Вот хороший полу-кросс-браузерный способ иметь градиентные границы, которые исчезают наполовину вниз. Просто установив Color-Stop на rgba(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>

Использование объяснено:

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

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Answer 5

попробуйте этот код

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

или, может быть, обратитесь к этой скрипке: http://jsfiddle.net/necolas/vqnk9/