PROSAGA码农传奇-数据仓库-坚实的渐变不是很坚固？颜色停止处没有清晰的边缘

<div class =“post-text”itemprop =“text”>
  <P>
    这似乎是一个普遍的错误。它不仅出现在Chrome（最新的FF有它）中，尽管不同的浏览器/引擎有不同的症状和规模。
  </p>
  <P>
    例如，如果你放一个“直边”，模糊的边缘会增长？线性梯度在一个非常大的元素上。
  </p>
  <P>
    在jsfiddle上查看我的测试用例：
    <a href="http://jsfiddle.net/matvey_andreyev/ufadpo1n/" rel="nofollow">
      http://jsfiddle.net/matvey_andreyev/ufadpo1n/
    </A>
    
Chrome使用非常高的元素表现得非常奇怪。
  </p>
  <P>
    代码本身：
  </p>
   <pre>
    <code>
      <div class="padding">
    <div id="gradient"></div>
    <div class="controls">
        <div class="part">
             <h3>Demo of a blurry edge where a straight one is expected</h3>
 <strong>linear-gradient</strong>( to bottom, transparent,
            <br />transparent
            <input class="tool" type="text" id="edge1" value="50px" />,
            <input type="text" class="tool" id="color2_1" value="#d00" />
            <input type="text" class="tool" id="edge2" value="50px" />,
            <input type="text" class="tool" id="color2_2" value="#d00" />
            <input type="text" class="tool" id="edgeLast" value="100%" />)
            <br/> <strong>height:</strong> 
            <input type="text" class="tool2" id="height" value="300px" />
        </div>
        <div class="part">
             <h4>Some preset examples</h4>

<p><span class="preset" id="default">default values</span>
            </p>
            <p><span class="preset" id="bigLast">10000px position of the last color stop</span>
            </p>
            <p><span class="preset" id="edge1greater">1st color stop greater than second</span>
            </p>
            <p><span class="preset" id="skyscraper">Set great height to the #gradient</span>
            </p>
            <p>Don't forget viewing in different browsers.</p>
        </div>
    </div>
</div>

setDefaultValues = function setDefaultValues() {
        $gradient.css({
            'background-image': defaultGrad,
                'height': defaultHeight
        });
        $edge1.val('50px');
        $edge2.val('50px');
        $edgeLast.val('100%');
        $color2_1.val('#d00');
        $color2_2.val('#d00');
        $height.val(defaultHeight);
    }

changeGrad = function changeGrad() {
        $gradient.css({
            'background-image': 'linear-gradient(to bottom, transparent, transparent ' + $edge1.val() + ', ' + $color2_1.val() + ' ' + $edge2.val() + ', ' + $color2_2.val() + ' ' + $edgeLast.val() + ')'
        });
    }

changeHeight = function changeHeight() {
        $gradient.css({
            'height': $height.val()
        });
    }

$('.tool').on('focus blur keyup change', changeGrad);
    $('.tool2').on('focus blur keyup change', changeHeight);

$('#default').click(function () {
        setDefaultValues();
        changeGrad();
    });

$('#bigLast').click(function () {
        setDefaultValues();
        $edgeLast.val('10000px');
        changeGrad();
    });

$('#edge1greater').click(function () {
        setDefaultValues();
        $edge1.val('55px');
        changeGrad();
    });

$('#skyscraper').click(function () {
        $height.val(50000 + 'px');
        changeHeight();
    });

});
</script>

</code>
  </pre>
  <P>
    目前似乎没有真正的答案。我最终使用背景图像而不是末端的线性渐变。
  </p>
</DIV>