写进度条的时候用过这个方法，记录一下

它的用法是

.test{

    clip: rect(<top>, <right>, <bottom>, <>left);

}

方向是按顺时针走的。

具体这四个值代表什么意思，看下面这几张图就明白了。

Demo

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

        <title>Clip</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            .wrapper{

                width: 100%;

                position: relative;

            }

            .woodman {

                position: absolute;

                top: 0;

                right: 0;

                clip: rect(52px, 280px, 290px, 95px);

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <img src="woodman.jpg"/>

            <img src="woodman.jpg" class="woodman"/>

        </div>

    </body>

</html>

结果如下

clip:rect()的更多相关文章

  1. clip:rect矩形剪裁

    clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换. 矩形剪裁 还需要绝对定位 ...

  2. CSS clip:rect矩形剪裁功能及一些应用介绍

    CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  3. CSS clip:rect矩形剪裁功能及应用

    .clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 最后有必要说明下:clip:rect矩形剪裁只能作用于position:abs ...

  4. css中clip:rect矩形剪裁功能

    一.示例 img { position:absolute; clip:rect(30px,200px,200px,20px); } 二.理解 clip 属性剪裁绝对定位元素. clip:rect矩形剪 ...

  5. css ：clip rect 正确的使用方法

    CSS clip 是一个极少使用,但又确实存在的属性. 而且,它其实在CSS2时代就有了. w3school 上有这么一句话: clip 属性剪裁绝对定位元素. 也就是说,只有 position:ab ...

  6. clip 属性剪裁绝对定位元素

    如果left >= right或者bottom <= top,则元素会被完全裁掉而不可见,即“隐藏”.通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的,从而提高了页面的可用性. I ...

  7. CSS图片裁剪Clip

    CSS Clip 裁剪 可以用它来裁剪一张图片噢. 我们来裁剪一下Google图标,把G字给裁剪下来. 注意这个clip得配合绝对定位才能使用,不然不起效果. rect (top, right, bo ...

  8. CSS裁剪clip

    × 目录 [1]定义 [2]RECT [3]应用 前面的话 CSS裁剪clip这个属性平时用的不多,但其实它并不是CSS3的新属性,很早就开始出现了.本文将介绍关于clip属性的相关知识 定义 一个绝 ...

  9. 用clip剪裁实现半圆

    定义和用法 clip 属性剪裁绝对定位元素. 说明 这个属性用于定义一个剪裁矩形.对于一个绝对定义元素,在这个矩形内的内容才可见.出了这个剪裁区域的内容会根据 overflow 的值来处理.剪裁区域可 ...

随机推荐

  1. No input file specified ci

    1. php.ini(/etc/php5/cgi/php.ini)的配置中这两项cgi.fix_pathinfo=1  (这个是自己添加的)

  2. Jfrog Maven jenkins pipeline 流水线 培训 简单实验

    1. 公司购买了一套jfrog artifactory ,然后厂商组织了一次培训 本次简单记录一下 jenkins和jfrog 二进制仓库的简单连接使用 2. 前期环境准备. scp jdk的tar包 ...

  3. Bootstrap @Media分类

      手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768)设置相应的min-width和max-width值 所以响应式设计一般对600 ...

  4. carson常用linux命令整理

    注:通过日常所用到的一些命令进行整理添加!! 完整的命令可参考:Linux命令大全 1.cp命令 cp命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录. 2.mount(挂载)命令 在li ...

  5. python中Switch/Case实现

    学习Python过程中,发现没有switch-case,过去写C习惯用Switch/Case语句,官方文档说通过if-elif实现.所以不妨自己来实现Switch/Case功能. 方法一 通过字典实现 ...

  6. 买了本Delphi面向对象编程思想，正在看，产生些问题。

    1:第33页说,Delphi通过调用类的一个构造函数来建立一个对象的实例,对象至少有一个create()的构造函数,使用时候写MyObject:=TmyObject.create即可.   但是第37 ...

  7. html css類和css（）

    addClass():一個或者多個元素添加一個或者多個類 $("元素一,元素2,元素3").addClass(“類名1  類名2”) removeClass():一個或者多個元素刪 ...

  8. 在Java Web程序中使用监听器可以通过以下两种方法

    之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响 ...

  9. List does not exist. The page you selected contains a list that does not exist. It may have been deleted by another user

    当我在subsite里点击"Add a document",报这个错,后来一看event log: 在AAM里加上一条: 问题搞定:

  10. 清理SharePoint 2013 安装配置环境

      最近我们在做Farm Building时,经常要清理Sharepoint的环境,简单整理了下清理步骤: 1.       Delete web app 2.       Delete servic ...