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

它的用法是

.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. 使用非服务器磁盘(MBROnly)安装ESXi时的方法.

    From ESXi 5.0, if you install ESXi to a empty hard disk, the target disk will be prepared with GPT-b ...

  2. FICO基础知识（三）

    成本中心: 成本中心是企业内的最小职责单位,是每一笔费用的具体接收者.创建成本中心主数据时必须将每个成本中心分配给标准层次结构的某个节点,标准层次结构反映了成本中心与成本中心.成本中心与成本中心组.成 ...

  3. .NET中的许可证机制--License

    .NET中的许可证机制主要类:System.ComponentModel.License(为所有许可证提供 abstract 基类.向组件的特定实例授予许可证)     System.Componen ...

  4. hive数据查询

    Fetch task 丢弃了mapreduce的作业的繁重任务,查询方便简单 1.第一种方式 2.linux命令行 3.地3中

  5. js cookies

    cookie用於識別用戶,存儲在訪問者的計算機里,當用戶首次使用瀏覽器時,會發送cookie.用戶可以創建和獲取cookie. cookie可以存儲用戶名字.用戶密碼和訪問時間等. document. ...

  6. Centos7 Journald 指令

    Journald是为Linux服务器打造的新系统日志方式,它标志着文本日志文件的终结.现在日志信息写入到二进制文件,使用journalctl阅读,要获得这些信息,Linux管理员将需要一些实践. Re ...

  7. Django-website 程序案例系列-7 创建多对多关系表

    创建多对多关系表: 方式一:一共三张表其中有一张中间表需要手工建立(建议使用第一种方式自定制程度高) class Host(models.Model): hostname = models.CharF ...

  8. BZOJ2152[国家集训队]聪聪可可——点分治

    题目描述 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一般情况下石头剪刀布就好了,可是他们已 ...

  9. Migrate Maven Projects to Java 11

    Migrate Maven Projects to Java 11 So you want to migrate to Java 11 but your Maven project is still ...

  10. AGC 016 F - Games on DAG(状压dp)

    题意 给你一个有 \(n\) 个点 \(m\) 条边 DAG 图,点的标号和拓扑序一致. 现在有两个人进行博弈,有两个棋子分别在 \(1, 2\) 号点上,需要不断移动到它指向的点上. 如果当前两个点 ...