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,我玩过的百分比,和价值,但我真的不能使它成为我想要的方式...
我如何得到我寻找的效果?
再一次,我希望自上而下大部分都是白色的,只是底部的一点蓝色渐渐消失。谢谢
答
你想使用颜色停止。
所以设置第一个颜色为0%,第二个为90%,第三个为100%(这将是蓝色)。
您可以使用此工具来获得你想要的效果http://gradients.glrzad.com/
确保将其以90%的增加,虽然第3颜色和位置。
干杯,
马尔科
使用图像而不是非官方的渐变?老实说,文字背后的渐变背景反正让我感到不安。使阅读变得更加困难。 – animuson 2010-07-13 21:21:01
你是认真的吗? – Marko 2010-07-13 21:27:55
是的,我是。这些渐变不是并且从未被正式支持的属性。是的,文本背后的渐变*会让阅读变得更难。 – animuson 2010-07-13 21:42:49