Example: use the Clip attribute of the style CSS to create colorful text

The principle of Multi-Colored Text is to combine two texts with the same color and different colors, and add the clip attribute to the elements respectively, make the Text above and below have different cutting locations, set different colors, so as to produce colorful Text effect, that is, Multi Colored Text.
Clip attributes:
Clip: auto | rect (number)
Parameters:
Auto: The object is not cut.
Rect (number ):
The four offset values calculated from () coordinates in the upper-right-bottom-left Order of the object are provided. Any value can be replaced by auto, that is, this edge is not cut.
Note:
Retrieves or sets the visible area of an object. The area is transparent.
You must set the position value to absolute. This attribute can be used only.
CSS code:
. 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 code
<Div class = "container">
<A href = "#" class = "textTop"> welcome to </a>
<A href = "#" class = "textBottom"> welcome to </a>
</Div>