webkit-border-image中的參數如何工作？似乎沒有關聯

我試圖做一個從右到左的底部漸變。雖然我有這個工作，但對我來說沒有意義，奇怪的事情發生在微小的變化中。webkit-border-image中的參數如何工作？似乎沒有關聯

給出了從權梯度至左

-webkit-border-image: -webkit-gradient(linear, 100% 100%, 0 0, from(#000000), to(#ffffff)) 0 0 100% 0; 
border-bottom-width: 5px;

這使梯度在DIV的背景？

-webkit-border-image: -webkit-gradient(linear, 100% 100%, 0 0, from(#000000), to(#ffffff)) 0 0 0 0; 
border-bottom-width: 5px;

這裏是我的理解和我做什麼不是：

從spec，它說了件：

-webkit-border-image: <function> <top> <right> <bottom> <left>

是說：

<top> The distance from the top edge of the image. 
<right> The distance from the right edge of the image. 
<bottom> The distance from the bottom edge of the image. 
<left> The distance from the left edge of the image.

所以，這意味着我的第一個0 0 100% 0應該有邊框圖像（即梯度）100％離開從底部！但它卻相反。相反，這是唯一一個顯示底部邊界漸變的，所以它離底部真0。

爲什麼設置0所有這些值使漸變成爲div的背景？實際上，如果div有background-color，則將邊框圖像的頂部，右側，底部和左側全部設置爲0將在背景顏色上繪製邊框漸變！

這一切是如何工作的？

工作示例（你可以改變它爲不同的值）

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Abbott RealTime</title> 
     <style> 
      .test 
      { 
       position: relative; 
       top: 0px; 
       left: 0px; 
       width: 300px; 
       height: 200px; 
       margin:0; 
       padding:0; 
       border:0; 
       outline:0; 
       font-size:100%; 
       vertical-align:baseline; 
       background:transparent; 
       background-color: #ffcc33; 
       /* This shows the bottom border properly */ 
       -webkit-border-image: -webkit-gradient(linear, 100% 100%, 0 0, from(#000000), to(#ffffff)) 0 0 100% 0; 

       /* This one would show the gradient in the background and the border as the background color! */ 
       /*-webkit-border-image: -webkit-gradient(linear, 100% 100%, 0 0, from(#000000), to(#ffffff)) 0 0 100% 0;*/ 

       border-bottom-width: 5px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="test">test</div 
    </body> 
</html>

來源

2013-06-20 Don Rhummy

你得到了什麼，從規範錯的是你認爲-webkit-邊界圖像將「切」了一個洞你提供的圖像（最後，您提供的漸變被用作圖像）。也就是說，一旦你將圖像切成9塊（它被水平切割成3個，垂直切割成3個），角落將被用於角落，邊緣和中央塊被丟棄。

這是錯誤的。中央部分將在中心使用;如果你不想讓背景被覆蓋，那麼透明度就是你的責任。

關於您的評論，我準備了一個演示，以便可以看到發生了什麼。你的兩個例子都是有限的，在這個演示中，我設置了一個讓你更容易看到會發生什麼的背景。它顯示在右邊作爲參考。和我中間，您可以從100％到0％的過渡

新增demo

.test1 { 
    left: 0px; 
     /* This shows the bottom border properly */ 
    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 100% 0%; 
} 

.test2 { 
    left: 320px;

/*這一次將顯示在背景梯度和邊界作爲背景色！*/

-webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 0% 0%; 
    -webkit-transition: all 5s; 
} 
.test2:hover { 
    left: 320px; 
    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 100% 0%; 
} 

.bg { 
    left: 640px; 
    background: linear-gradient(45deg, black, transparent, red); 
}

更具體地說，這個百分比指定了背景圖片的底部部分。如果您指定100％，全部您的圖像是拍攝底部。（並且中間和上部沒有圖像）。你可以看到漸變如何壓縮。如果您指定0％，則底部不會拍攝任何圖像。

來源

2013-06-20 20:41:25 vals

好的，那麼'100％'距底部的距離如何導致圖像顯示在底部？（我仍然困惑） –

webkit-border-image中的參數如何工作？似乎沒有關聯

回答

相關問題