Use the clip attribute of CSS to create multi-colored text)

Principle

Combine two texts of the same color and different colors, and add the clip attribute to them respectively,
The text above and below are cut at different locations, resulting in two different colors.

Clip: From su Shen Xiaoyu CSS Manual

 
Clip: auto | rect (Number) parameter: Auto: the object does not have a cut rect (Number number ): the four offset values calculated from the (0, 0) coordinate in the upper-right-bottom-left order of the object are provided,
Any value can be replaced by auto, that is, the side is not cut. Description: Retrieves or sets the visible area of the object. The area is transparent. You must set the position value to absolute. This attribute can be used only.
 

Test Environment

Firefox1.5, ie6.0, opera8.5, ie5.01 green version passed.

CSS

 
. Textbottom {color: #333333; position: absolute; left: 3em; top: 1em; Font: 26px century Gothic, Arial, Helvetica, sans-serif; clip: rect (18px auto );}. texttop {color: # cc0000; position: absolute; left: 3em; top: 1em; Font: 26px century Gothic, Arial, Helvetica, sans-serif; clip: rect (0 auto 18px 0 );}. container {width: 28em; Height: 5em; margin: 1em auto; position: relative; Background: # f6f6f6 ;}
 

XHTML

<Div class = "Container"> <a href = "#" class = "texttop"> Cascading Style Sheet </a> <a href = "#" class = "textbottom"> Cascading Style Sheet </a> </div>
 

References: http://www.ibloomstudios.com/article8/

Final Effect