CSS中內容的剪下屬性clip
阿新 • • 發佈：2019-02-13
1. 在CSS中，可以使用剪下屬性對元素內容的視覺化區域進行控制，剪下區域所使用的屬性時clip屬性，
用來裁剪元素的視覺化區域，內容的剪下屬性可以使用2種屬性值，一種為auto值，另一種為區域值，語法結構：
clip: auto | rect(number, number, number, number)
其中，rect中定義的4個屬性值是以元素左上角為中心，按照上、右、下、左的順序定義的剪下區域的4條邊線，
在4條邊線規定的區域中將顯示元素內容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> CSS屬性 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> .clip { position: absolute; top: 20px; left: 20px; clip: rect(10px 140px 40px 80px) !important; width: 200px; height: 200px; background: #666666; } .main { width: 300px; height: 300px; background: #999999; } </style> </head> <body> <div class="main"> <div class="clip"></div> </div> </body> </html>
如上圖所示，在子元素中，只有被定義剪下屬性的區域部分才能夠顯示，其他部分以透明的方式顯示。
2. 剪下屬性與內容
在使用剪下屬性的時候，元素內容的顯示方式並不發生改變，元素中的內容在剪下區域之外的部分將會消失，但是元素佔有的空間
並不會發生改變。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> CSS屬性 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> .clip { position: absolute; top: 20px; left: 20px; clip: rect(5px 140px 80px 20px); width: 200px; height: 200px; background: #666666; } .main { width: 200px; height: 200px; background: #999999; } </style> </head> <body> <div class="main"> <div class="clip">這裡是剪下元素中的內容，注意內容被裁減的情況。</div> </div> </body> </html>
在子元素中存在部分文字內容，當使用剪下屬性後，部分文字內容和背景將會消失，但是原有文字內容的所在位置不發生變化。