Then someone asked, what CSS to do the effect of both wonderful and practical it? Clip, yes, is the Clip attribute in CSS, which is ignored by most people:
Grammar:
Clip:auto | rect ( number number number number)
Parameters:
Auto: Object No clipping
Rect (number number number number): Provides four offset values computed from the upper-left corner of the object (0,0) in the upper-right-left order, where any of the values can be replaced with auto, that is, the edge does not cut.
It is to be noted that
1.clip properties must be used in conjunction with Position:absolute.
2. The trim reference point is always the upper left corner, which differs from the margin,padding.
Cases:
<div style= "Position:absolute;clip:rect (10px auto 80px 5px)" ></div>
We can use clip to achieve the cutting and stitching of various elements.
The classical text concatenation realizes, the colorful text effect:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content=; charset=gb2312 "/> <title>clip Colorful text </title> <style type=" Text/css "> Body{background: #FFFFFF; Color: #333333; Font-family:arial, Helvetica, Sans-serif; font-size:100%; line-height:140%; Text-align:center; padding:0; margin:0;} p{margin:0;} #top {min-height:90%; overflow:auto;} #footer {height:10% background: #CC0000; color: #FFFFFF;} a{Text-decoration:none;} . textbottom {color: #a90; position:absolute; left:146px; top:1em; font:26px "Century Gothic", Arial, Helvetica, sans-s Erif; Clip:rect (18px Auto Auto Auto);} . texttop {color: #f90; position:absolute; left:146px; top:1em; font:26px "Century Gothic", Arial, Helvetica, Sans-seri F Clip:rect (0 auto 18px 0);} . container {width:28em; height:5em mArgin:1em Auto; position:relative; Background: #F6F6F6; Text-align:center} texttop:hover {color: #a90;} . textbottom:hover {color: #f90;} </style> </pead> <body> <div id= "Top" > <div class= "container" > Clip Fantastic Thoughts </div> <p> top half of the text </p> <div class= "container" > clip the lower half of the letter </div> <p> </p> <div CLA ss= "Container" > Clip fantastic think clip </div> <p> Two group text coincidence effect </p> </div> </body> </ptml >
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This is the vertical stitching, we can also crosswise splicing, write more words can be achieved gradually change color, Hyun Ah!
