邊框不透明，帶線性漸變

Question

爲什麼當我將透明邊框應用於帶線性漸變的div時，邊框在頂部和底部不透明。

div { 
    width: 300px; 
    height: 300px; 
    background: linear-gradient(pink, red); 
    border: 20px solid transparent; 

}

截圖 http://i43.tinypic.com/2r3gjmx.png

Answer 1

你需要使用一些這樣的事

div{ 
    width: 300px; 
    height: 300px; 
    background: linear-gradient(pink, red); 
    border: 20px solid rgba(0,0,0,0.3); 
    -moz-background-clip: padding; 
    -webkit-background-clip: padding; 
    background-clip: padding-box; 
} 

Answer 2

@ dimann90有意見正確的解決方案。在元素上使用background-repeat: no-repeat。

這也是爲什麼這個工程：

背景圖像在x和默認y方向無限重複。線性漸變是一個背景圖像，該圖像的大小由內容框的大小控制（實際上它是more complicated，但這對我們的目的來說已經足夠了）。元素的背景貫穿填充和邊框（但不包括邊距）。所以，邊框會導致元素框的總大小比生成的背景圖片大，並且會重複。如果邊框是透明的，那麼重複的圖像將顯示出來。