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

它的用法是

.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. C1考试科目一知识总结

    第二 交通信号 交通信号灯 机动车信号灯(红灯停,路灯走,黄灯等) 车道信号灯(绿色箭头表示该车道通行,红色箭头和红叉表示该车道禁止通行) 方向指示信号灯(红色箭头表示该方向禁止通行,绿色箭头表示该方 ...

  2. 在DBGrid中，单击单元格选择整行，双击又可编辑单元格

    在设计过程中,有时候数据较大量,field 较多的时候,只是点击单元格可能会对某个field的数据误操作(如数据错行),为此才会想到这个问题,解决办法如下:点击单元格就改当前行颜色. 首先DBGRID ...

  3. Sql Server 之 Merge

    转载:http://blog.csdn.net/zmoneyz/article/details/38404111 现在我们来创建了两个表Person和UserLogin Person表如下: User ...

  4. 我的G++编译选项

    -Wall -Wextra -g3 -DLOCAL -Wshadow -Wpointer-arith -Wcast-qual -Waggregate-return -Winline -Wunreach ...

  5. MT【214】焦点弦长公式

    已知椭圆焦点为$F_1(-1,0),F_2(1,0)$,且椭圆与直线$y=x-\sqrt{3}$相切,求(1)椭圆的方程(2)过$F_1$作两条相互垂直的直线$l_1,l_2$与椭圆相交于$P,Q,M ...

  6. 【转】linux环境内存分配原理 malloc info

    Linux的虚拟内存管理有几个关键概念: Linux 虚拟地址空间如何分布?malloc和free是如何分配和释放内存?如何查看堆内内存的碎片情况?既然堆内内存brk和sbrk不能直接释放,为什么不全 ...

  7. git pull报“unable to update local ref”解决方案

    使用git pull拉取代码的时候,无法拉取最新代码,报"unable to update local ref"错误. 除了重新clone一份代码外,还可以使用如下解决方案: 1. ...

  8. 自学Zabbix7.1 IT services

    自学Zabbix7.1 IT services 1. 概念IT Services 服务器或者某项服务.业务的可用率,不懂技术的上级领导会过问最近服务器可用率如何.所有api的状况怎么样?通常一些技术人 ...

  9. sql server 小技巧(1) 导入csv数据到sql server

    1. 右击 DataBaseName,选择 Tasks->Import Data 2. 选择数据源: Flat File Source , 选择一个csv文件 Advance: 选择所有的列,改 ...

  10. 洛谷 P3102 [USACO14FEB]秘密代码Secret Code 解题报告

    P3102 [USACO14FEB]秘密代码Secret Code 题目描述 Farmer John has secret message that he wants to hide from his ...