CSS3背景渐变

我有这个类设置为一个页面即时测试（刚开始尝试实现CSS3，所以对我来说很容易）。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（在PC上）和FF在Mac上，我知道IE不支持这一点。

我的问题是关于渐变...从我上面的梯度是相当平滑的，但我只是想要一点蓝色从底部爬起来......不会褪色到我看到的高度它在我的browswer，我玩过的百分比，和价值，但我真的不能使它成为我想要的方式...

我如何得到我寻找的效果？

再一次，我希望自上而下大部分都是白色的，只是底部的一点蓝色渐渐消失。谢谢

来源

2010-07-13 tony noriega

使用图像而不是非官方的渐变？老实说，文字背后的渐变背景反正让我感到不安。使阅读变得更加困难。 – animuson 2010-07-13 21:21:01

你是认真的吗？ – Marko 2010-07-13 21:27:55

是的，我是。这些渐变不是并且从未被正式支持的属性。是的，文本背后的渐变*会让阅读变得更难。 – animuson 2010-07-13 21:42:49

你想使用颜色停止。

所以设置第一个颜色为0％，第二个为90％，第三个为100％（这将是蓝色）。

您可以使用此工具来获得你想要的效果http://gradients.glrzad.com/

确保将其以90％的增加，虽然第3颜色和位置。

干杯，

马尔科

来源

2010-07-13 21:20:56 Marko

完全正确，还有另外一个网站，我用了不少所谓的ColorZilla。

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

来源

2011-07-07 13:01:21 RossDoughty

CSS3背景渐变

回答

相关问题