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

它的用法是

  1. .test{
  2.     clip: rect(<top>, <right>, <bottom>, <>left);
  3. }

方向是按顺时针走的。

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

Demo

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6.         <title>Clip</title>
  7.         <style type="text/css">
  8.             *{
  9.                 margin: 0;
  10.                 padding: 0;
  11.             }
  12.             .wrapper{
  13.                 width: 100%;
  14.                 position: relative;
  15.             }
  16.             .woodman {
  17.                 position: absolute;
  18.                 top: 0;
  19.                 right: 0;
  20.                 clip: rect(52px, 280px, 290px, 95px);
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <div class="wrapper">
  26.             <img src="woodman.jpg"/>
  27.             <img src="woodman.jpg" class="woodman"/>
  28.         </div>
  29.     </body>
  30. </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. linux服务器上安装python 3.6.3

    一.下载源码包 地址https://www.python.org/ftp/python/3.6.3/Python-3.6.3.tar.xz 二.解压源码包 1.下载解压工具xz #yum -y ins ...

  2. PHP IF ELSE简化/三元一次式的使用

    一般我们会这样写: <? if($_GET['time']==null) { $time = time(); } else { $time = $_GET['time']; } echo $ti ...

  3. HDU1711-KMP-水题

    纯KMP,入门题,不知道读入挂加朴素匹配能不能过 #include <cstdio> #include <algorithm> #include <cstring> ...

  4. SQL partition （小组排序）

    很多时候,我们在SQL中进行数据去重(distinct) 结果发现有2条一样ID,或者name的数据,我们想要最接近的那条数据. 直接看看题目: 原表 select ID,Title,PRICE fr ...

  5. Java原子类实现原理分析

    在谈谈java中的volatile一文中,我们提到过并发包中的原子类可以解决类似num++这样的复合类操作的原子性问题,相比锁机制,使用原子类更精巧轻量,性能开销更小,本章就一起来分析下原子类的实现机 ...

  6. Fantasy of a Summation LightOJ - 1213 （快速幂）

    题意: 首先 只看第一层循环的A[0],是不是用了nk-1次  A[1]也是用了nk-1次······ 所以 第一层的sum(A[i]的和) 一共用了nk-1 所以第一层为sum * nk-1 因为又 ...

  7. HihoCoder - 1498 Diligent Robots

    There are N jobs to be finished. It takes a robot 1 hour to finish one job. At the beginning you hav ...

  8. luogu2178/bzoj4199 品酒大会 (SA+单调栈)

    他要求的就是lcp(x,y)>=i的(x,y)的个数和a[x]*a[y]的最大值 做一下后缀和,就只要求lcp=i的了 既然lcp(x,y)=min(h[rank[x]+1],..,[h[ran ...

  9. 教程] 《开源框架-Afinal》之FinalHttp 01一步一脚

    1.FinalHttp是什么 :FinalHttp 对 HttpClient再次封装,最简洁的就是增加了许多回调的方法,对Get 和 Post 请求进行了简化.另外一点就是FinalHttp加入线程池 ...

  10. Raspbian首次安装后无法使用SSH链接

    使用Putty连接树莓派,出现Network Error:Connection Refused 新版的Raspbian系统默认禁用了SSH. 解决方法:在/boot分区创建名为"ssh&qu ...