Home > Developer > JavaScript
So someone asked, What is the magical and practical effect of CSS? Clip, right, is the clip attribute in css, which is ignored by most people:
Syntax:
Clip: auto | rect (number)
Parameters:
Auto: the object is not cut.
Rect (number): provides four offset values calculated from the (0, 0) coordinate in the upper-right-bottom-left order of the object, any value can be replaced by auto, that is, this edge is not cut.
Note that
1. the clip attribute must be used with position: absolute.
2. the crop reference point is always in the upper left corner, which is different from margin and padding.
Example:
<Div style = "position: absolute; clip: rect (10px auto 80px 5px)"> </div>
We can use clip to crop and splice various elements.
The classic text splicing implementation, colorful text effects:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; 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-serif; clip: rect (18px auto );}. textTop {color: # f90; position: absolute; left: 146px; 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; text-align: center }. textTop: hover {color: # a90 ;}. textBottom: hover {color: # f90 ;} </style> </pead> <body> Clip whimsy <p> upper part of a text </p> Clip whimsy <p> lower part of a text </p> Clip whimsy: Clip whimsy <p> Effect of overlapping two groups of texts </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
This is a vertical stitching, we can also splice horizontally, if you write more, you can achieve gradient, dazzling ah!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
