CSS-Графический линейный градиент

Question

Я попытался (и преуспел) в создании дизайна с использованием border-image и linear-gradient. Моя проблема в том, что я не совсем уверен, что я сделал. Синтаксис меня сбивает с толку. Я понимаю, что серия цветов - это то, как она исчезает от цвета к цвету, и первое значение обозначает направление, но 1 25% в конце - полная тайна. Я много играл с этими значениями и to bottom right, но не мог понять, как они соотносятся друг с другом. Может ли кто-нибудь объяснить, что означает каждое значение?

Бонусные баллы, если вы можете сообщить мне, как получить тот же эффект с -webkit-, -moz- и -o- версий. Бонусные бонусные баллы, если вы также можете объяснить эти синтаксисы.

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    
 
    border-image: linear-gradient(to bottom right, black, white, black, white, black) 1 25%; 
 
    
 
/* -webkit-border-image: -webkit-gradient(linear, 0 0, 100% 100%, from(black), to(white)) 1 100%; 
 
    -webkit-border-image: -webkit-linear-gradient(black, white, black, white, black) 1 100%; 
 
    -moz-border-image: -moz-linear-gradient(black, white) 1 100%; 
 
    -o-border-image: -o-linear-gradient(black, white) 1 100%; */ 
 

 
}

<div class="box"></div>

Answer 1

Я думаю, что это что-то вроде этого.

border-image-slice: 1 25% 

здесь является документация по MDN Border image and attributes

Answer 2

linear gradient İŞ создает <image>, который представляет собой линейный градиент цвета.

Здесь объяснение для linear gradient.

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

where <side-or-corner> = [left | right] || [top | bottom] 
    and <color-stop>  = <color> [ <percentage> | <length> ]? 

Браузер по умолчанию один.

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) // Safari/Chrome 
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+); // Firefox 
linear-gradient([ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+); // Normal 

Ссылка:
https://www.w3.org/TR/css3-images/#linear- https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
http://www.the-art-of-web.com/css/linear-gradients/