clip 剪裁矩形实现代码

(编辑：jimmy 日期: 2024/5/9 浏览：3 次 )

一、clip属性必须和定位属性postion一起使用才能生效。
二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，如图三所示，这点不像padding和margin，它们两个的右边距和下边距是从最右边和最下边开始计算的。

clip属性设置元素的形状。这个属性用于定义一个剪裁矩形。在这个矩形内的内容才可见，出了这个剪裁区域的内容和 overflow:hidden 的效果相同。剪裁区域可能比元素的内容区大，也可能比内容区小。
　　clip属性值：auto | rect (top, right, bottom, left)
　　auto代表不裁切，rect中的上右下左四个方向填入的应是数值，表示裁切的位置。

</div>
            <strong>上一篇：</strong><a href="http://m.imxmx.com/show/1/74611.html" title="CSS 清除浮动元素方法 整理">CSS 清除浮动元素方法 整理</a><Br />
            <strong>下一篇：</strong><a href="http://m.imxmx.com/show/1/74613.html" title="论WEB标准在中国的灰飞烟灭">论WEB标准在中国的灰飞烟灭</a><br />
        </div>
    </div>
    <div class="headlines"><div class="type1"><a href="/show/1/604833.html">一句话新闻</a></div><a href="/show/1/604673.html">高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布</a></div><div class="headlines">高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。<br>在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。<br>预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。<br>谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。</div>
    
    <div class="headlines">
        友情链接:<a href="/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a>
    </div>
    <div class="footbig">
        <div class="foot">
            <ul>
                <li><a href="/" class="icon1">主页</a></li>
                <li><a href="/list/1538.html" class="icon2">破解</a></li>
                <li><a href="/list/1554.html" class="icon2">音乐</a></li>
                <li><a href="/list/1557.html" class="icon2">影视</a></li>
            </ul>
        </div>
    </div>
    
</body>

</html>