CSS邊界圖像線性漸變

Question

我嘗試（並成功）使用border-image和linear-gradient創建設計。 我的問題是我不確定自己做了什么。 語法使我感到困惑。 我知道顏色系列是顏色從一種顏色逐漸淡入淡出的方式，並且第一個值表示方向，但是最后的1 25%完全是個謎。 我一直在to bottom right這些價值觀，並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

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/zh-CN/docs/Web/CSS/linear-gradient
http://www.the-art-of-web.com/css/linear-gradients/

Answer 2

我想是這樣的。

border-image-slice: 1 25%

這是文檔MDN邊框圖像和屬性