你可以在CSS中添加线性渐变色吗？

-2

我已经知道如何编码HTML和CSS，但它是否可能在有线性渐变？

像这样：

HTML：

<div style="color:(color1),(color2)" id="gradient"> 
This is an example div! (color1) and (color2) are placeholders 
</div>

CSS：

#gradient { 

color:(color1),(color2); 
}

谢谢！

来源

2014-01-25 juniorRubyist

是的，它是..为背景..，通过谷歌搜索“css渐变”：http://www.w3schools.com/css/css3_gradients.asp – Hardy

@ Hardy请使用答案！低于 – juniorRubyist

是的，这是一个[梯度发生器]（http://www.colorzilla.com/gradient-editor/）。 – mdesdev

In supported -webkit个浏览器如Chrome/Safari浏览器，你可以使用以下命令：

EXAMPLE HERE

h1 { 
    background: -webkit-linear-gradient(red, blue); 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
}

这实际上将使文本颜色渐变。

来源

2014-01-25 23:11:55

不是很有帮助，因为我也使用IE。 – juniorRubyist

@Joseph请看我的回答，它是跨浏览器兼容的。 – Coop

@Joseph要清楚，你是指**文字颜色**还是**背景**颜色？ –

是的，它是可能的，但每一个浏览器似乎使用不同的方法：

HTML

<div id="element">Your content here.</div>

CSS

#element { 
    background: #000000; 
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); 
    background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%); 
    background: -o-linear-gradient(top, #000000 0%, #ffffff 100%); 
    background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%); 
    background: linear-gradient(to bottom, #000000 0%, #ffffff 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=0); }

你可以改变颜色的CSS上面还有每种颜色混合的百分比。

来源

2014-01-25 23:09:23 Coop

你可以在CSS中添加线性渐变色吗？

回答

相关问题