当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > clip 剪裁矩形实现代码

CSS样式表
以图换字的几个方法及思路
使用有趣的自定义标记布局页面
改进网页可读性的7个方法
div做细线表格,很强悍
CHM集锦(CHM)
IE与FireFox的兼容性问题
DIV 居中的绝好解决方法
解决 select 挡住div的解决方法
如何处理多国语言
Firefox CSS私有属性备忘记录
CSS兼容要点分析
滚动条效果
层自动适应高度
让2个DIV居中并排显示
会移动的文字(Marquee)
web标准常见问题集合
DIV+CSS 简单的导航条
web标准常见问题集合2
web标准常见问题集合3
用CSS打造 抽屉菜单

CSS样式表 中的 clip 剪裁矩形实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 127 ::
收藏到网摘: n/a

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

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



提示:您可以先修改部分代码再运行

div的定位属性设置为相对定位是为了让图片以它为定位标准,将背景定义为#FFF985是为了让显示效果更明显。
图片的绝对定位是相对于id为Clip的div而言的,clip中的数值按照上右下左的顺序排列的。