clip 属性剪裁绝对定位元素。
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)。
所有主流浏览器都支持 clip 属性。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .box{width:300px;height:300px;border:1px solid #ccc;margin:100px;position:relative;} .circle{width:16px;height:16px;border:1px solid #ccc;background:#fff;position:absolute;top:29px;z-index:1;border-radius:50%;} .circle_left{left:-8px;clip:rect(0, auto, auto, 7px);} .circle_right{right:-8px;clip:rect(0, 11px, auto, auto);} </style> </head> <body> <div class="box"> <em class="circle circle_left"></em> <em class="circle circle_right"></em> </div> </body> </html>
原文：http://www.cnblogs.com/tnnyang/p/5050567.html