设为首页 - 加入收藏 黄石站长网 (http://www.0714zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 视频 用户 日期
当前位置: 首页 > 创业 > 经验 > 正文

CSS系列教程:利用clip剪裁矩形图片

发布时间:2018-08-24 19:27 所属栏目:[经验] 来源:站长网
导读:烈火网(LieHuo.Net)教程 应用clip属性需要注意的两点: 一、clip属性必须和定位属性postion一起使用才能生效。 二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,如图三所示,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下

  烈火网(LieHuo.Net)教程 应用clip属性需要注意的两点:

  一、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中的数值按照上右下左的顺序排列的。

  本文转自:http://www.cnblogs.com/mslove/

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章