html - 境界線が直線グラデーションで透明にならない

Question

透明な境界線を線形グラデーションで div に適用すると、境界線が上下で透明にならないのはなぜですか。

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

}

スクリーンショット http://i43.tinypic.com/2r3gjmx.png

Answer 1

@ dimann90 のコメントに正しい解決策があります。要素で使用background-repeat: no-repeatします。

これが機能する理由は次のとおりです。

デフォルトでは、背景画像は x 方向と y 方向に無限に繰り返されます。線形グラデーションは背景画像であり、その画像のサイズはコンテンツ ボックスのサイズによって制御されます (実際にはもっと複雑ですが、目的にはこれで十分です)。要素の背景は、パディングとボーダー (マージンは除く) まで拡張されます。そのため、境界線によって要素のボックスの合計サイズが生成された背景画像よりも大きくなり、それが繰り返されます。境界線が透明な場合、繰り返し画像が透けて見えます。

Answer 2

このようなものを使用する必要があります

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