Question

我有一个用于测试页面的类（刚刚开始尝试实现CSS3，所以对我很轻松）。

.CSS3TESTDIV{
    width:228px;
    height:300px;
    background-color: #fff3;
    background-image: -moz-linear-gradient(0% 100% 90deg, #0068b3, #fff);
        background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#fff), to(#0068b3)); 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border: 1px solid #0068b3; 
    padding: 10px;
    margin:0 10px 0 0;
    -moz-box-shadow: 7px 7px 7px #888;  
    -webkid-box-shadow: 7px 7px 7px #888;
    box-shadow: 7px 7x 7px #888;
    float:left;         
}

在FF（在电脑上）和Mac上的FF一切都很好看，我知道IE不支持这个。

我的问题是关于渐变...从我上面的渐变是相当平滑的，但我只是想从底部爬出一点点蓝色...不会像我看到的那样褪色在我的浏览器上，我玩了百分比和价值观，但我似乎真的不能按照我想要的方式......

我如何才能获得效果？

同样，我希望从上到下大部分都是白色，而底部的蓝色则略微消失。感谢

Answer 1

您想使用色标。

因此将第一种颜色设为0％，第二种设定为90％，第三种设定为100％（将为蓝色）。

您可以使用此工具获得所需的效果http://gradients.glrzad.com/

确保添加第3种颜色并将其定位在90％。

干杯，

马尔科

Answer 2

非常正确，还有一个我使用的网站ColorZilla。

这非常有用，尤其是确保所有浏览器都能看到您的渐变。（我之前在那里滑过：/）

CSS3背景渐变

2 个答案: