forked from meyerweb/css-tests
-
Notifications
You must be signed in to change notification settings - Fork 0
/
clip.htm
43 lines (38 loc) · 1.54 KB
/
clip.htm
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>11.1.2 clip </title><meta http-equiv="Content-Style-Type" content="text/css"><link rel="stylesheet" type="text/css" media="screen" href="base.css"><style type="text/css">.contain {position: relative; height: 3.5em; border: 1px dotted gray;}.cl1 {clip: rect(0 10px 30px 5px); position: absolute; padding: 0; border: 1px solid gray; background: #FCC;}.cl2 {clip: inset-rect(5px 10px 20px 0); position: absolute; padding: 0; border: 1px solid gray; background: #FCC;}</style></head><body><pre>.contain {position: relative; height: 3.5em; border: 1px dotted gray;}.cl1 {clip: rect(5px 10px 10px 5px); position: absolute; padding: 0; border: 1px solid gray; background: #FCC;}.cl2 {clip: inset-rect(5px 10px 10px 5px); position: absolute; padding: 0; border: 1px solid gray; background: #FCC;}</pre><div class="contain"><p class="cl1">[cl1] The content of this 'p' element should be clipped slightly: 5 pixels on the top, 10 pixels to the right, 10 pixels on the bottom, and 5 pixels to the left. This will cause the text to be cut off to a small extent on each side of the element.</p></div><div class="contain"><p class="cl2">[cl2] The content of this 'p' element should be clipped slightly: 5 pixels on the top, 10 pixels to the right, 10 pixels on the bottom, and 5 pixels to the left. This will cause the text to be cut off to a small extent on each side of the element.</p></div></body></html>