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

它的用法是

.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. [日常工作]WorkStation 使用端口转发的方式使用宿主机IP地址提供服务

    1. 虚拟机内的地址如果经常变化,或者是想使用宿主机进行网络服务 但是又不想有人能够访问具体的服务器提供机器.. 可以使用宿主机转发虚拟机的端口的方式来进行处理. workstation 比较好实现 ...

  2. FuelPHP 系列（六） ------ CURD 增删改查

    一.create $article = new Model_Article(); // 或 $article = Model_Article::forge(); // 保存数据,返回新增数据 id $ ...

  3. Jquery ：animate反复执行的动画可以利用函数的回调

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...

  4. 流程控制之if判断，while循环，for循环

    if判断? 什么是if判断? 判断一个条件如果成立则做...不成立则... 为什么要有判断? 让计算机像人一样具备判断的能力 如何用if判断 if 条件1: code1    code2    cod ...

  5. ACM数论之旅12---康托展开（(*ﾟ▽ﾟ*)装甲展开，主推进器启动，倒计时3,2,1......）

    在我们做题中,搜索也好,动态规划也好,我们往往有时候需要用一个数字表示一种状态 比如有8个灯泡排成一排,如果你用0和1表示灯泡的发光情况 那么一排灯泡就可以转换为一个二进制数字了 比如 0110011 ...

  6. 影响MapReduce性能的几个因素

    Hadoop MapReduce性能优化影响MapReduce输入数据处理时间的因素很多.其中之一是实现map和reduce函数时使用的算法.其他外部因素也可能影响MapReduce性能.根据我们的经 ...

  7. tenda u1 usb wireless device install driver for kali linux kernal Debian 4.3.3-7kali2 (2016-01-27) x86_64 GNU/Linux

    因为内核比较新的关系,tenda官方网站上面提供给u1无线网卡的驱动并不能正常编译使用,编译的时候报一个类似错误 /usr/src/linux-headers--kali1-common/Makefi ...

  8. SESSION和cookie的使用和区别

    PHP中SESSION和cookie的使用和区别 cookie 是一种在远程浏览器端储存数据并以此来跟踪和识别用户的机制. PHP在http协议的头信息里发送cookie, 因此 setcookie( ...

  9. Code First 重复外键

    原因:在一个表中,我有如下字段 表名:orderInfo 列名:companySend,companyReceiver 先展示表结构,(手打了,见谅) public class OrderInfo { ...

  10. 2015 HIAST Collegiate Programming Contest H

    A sequence of positive and non-zero integers called palindromic if it can be read the same forward a ...