html字体渐变颜色的设置颜色代码,html – 如何在CSS中使用渐变作为字体颜色？...

您可以使用位于彼此顶部的多个跨度,并为其中的每一个分配不同的高度和颜色.它真的很丑的编码明智,但它的作品.

http://jsfiddle.net/7yBNv/

文本选择行为有点时髦,但不是太糟糕.并复制几个条目(取决于选择哪一层)所以我会说你最好用svg来解决这个问题.

HTML：

Sample Gradient Text (h1)

Sample Gradient Text (h1)

Sample Gradient Text (h1)

Sample Gradient Text (h1)

Sample Gradient Text (h1)

Sample Gradient Text (h1)

CSS：

.Gradient{

position: relative;

overflow: hidden;

height: 28px;

}

.Gradient,.Gradient .G1,.Gradient .G2,.Gradient .G3,.Gradient .G4,.Gradient .G5{

height: 28px;

position: absolute;

margin: 0;

top: 0px;

left: 0px;

color: #4a778b;

font-family: century gothic,helvetica,arial;

font-size: 23px;

font-weight: normal;

overflow: hidden;

}

.Gradient{

position: relative;

}

.Gradient .G5{

height: 10px;

color: #81a4b4;

z-index: 6;

}

.Gradient .G4{

height: 13px;

color: #789eae;

z-index: 5;

}

.Gradient .G3{

height: 16px;

color: #6f96a6;

z-index: 4;

}

.Gradient .G2{

height: 19px;

color: #618a9c;

z-index: 3;

}

.Gradient .G1{

height: 22px;

color: #547f92;

z-index: 2;

}