css - コンパス/cssはエッジの境界線をフェードしますか？

Question

私はこのテクニックがかなり多く使われるのを見てきました。たとえば、両端でフェードするセパレータの境界線（stackoverflowヘッダーの下部の境界線など）。コンパスでこれを達成するにはどうすればよいですか？私は彼らのドキュメントとグーグルを検索しましたが、これを行う方法の例を見つけることができません。

Answer 1

Compass CSSを使ったことがないのですが、CSSとSVGを混ぜてみてはいかがでしょうか。

SVGファイル：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="div" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
            <stop offset="50%" style="stop-color:rgb(153,153,153);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
        </linearGradient>
    </defs>

<rect x="0" y="0" width="100%" height="100%" fill="url(#div)" />
</svg>

CSS：

div.separator
{
    width: 80%;
    height: 16px;
    background-image: url(gradient_file.svg);
}