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" "/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" "/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>
在子元素中存在部分文本内容，当使用剪切属性后，部分文本内容和背景将会消失，但是原有文本内容的所在位置不发生变化。
