clip:rect()
写进度条的时候用过这个方法,记录一下
它的用法是
- .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()的更多相关文章
- clip:rect矩形剪裁
clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换. 矩形剪裁 还需要绝对定位 ...
- CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- CSS clip:rect矩形剪裁功能及应用
.clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 最后有必要说明下:clip:rect矩形剪裁只能作用于position:abs ...
- css中clip:rect矩形剪裁功能
一.示例 img { position:absolute; clip:rect(30px,200px,200px,20px); } 二.理解 clip 属性剪裁绝对定位元素. clip:rect矩形剪 ...
- css :clip rect 正确的使用方法
CSS clip 是一个极少使用,但又确实存在的属性. 而且,它其实在CSS2时代就有了. w3school 上有这么一句话: clip 属性剪裁绝对定位元素. 也就是说,只有 position:ab ...
- clip 属性剪裁绝对定位元素
如果left >= right或者bottom <= top,则元素会被完全裁掉而不可见,即“隐藏”.通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的,从而提高了页面的可用性. I ...
- CSS图片裁剪Clip
CSS Clip 裁剪 可以用它来裁剪一张图片噢. 我们来裁剪一下Google图标,把G字给裁剪下来. 注意这个clip得配合绝对定位才能使用,不然不起效果. rect (top, right, bo ...
- CSS裁剪clip
× 目录 [1]定义 [2]RECT [3]应用 前面的话 CSS裁剪clip这个属性平时用的不多,但其实它并不是CSS3的新属性,很早就开始出现了.本文将介绍关于clip属性的相关知识 定义 一个绝 ...
- 用clip剪裁实现半圆
定义和用法 clip 属性剪裁绝对定位元素. 说明 这个属性用于定义一个剪裁矩形.对于一个绝对定义元素,在这个矩形内的内容才可见.出了这个剪裁区域的内容会根据 overflow 的值来处理.剪裁区域可 ...
随机推荐
- 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 ...
- PHP IF ELSE简化/三元一次式的使用
一般我们会这样写: <? if($_GET['time']==null) { $time = time(); } else { $time = $_GET['time']; } echo $ti ...
- HDU1711-KMP-水题
纯KMP,入门题,不知道读入挂加朴素匹配能不能过 #include <cstdio> #include <algorithm> #include <cstring> ...
- SQL partition (小组排序)
很多时候,我们在SQL中进行数据去重(distinct) 结果发现有2条一样ID,或者name的数据,我们想要最接近的那条数据. 直接看看题目: 原表 select ID,Title,PRICE fr ...
- Java原子类实现原理分析
在谈谈java中的volatile一文中,我们提到过并发包中的原子类可以解决类似num++这样的复合类操作的原子性问题,相比锁机制,使用原子类更精巧轻量,性能开销更小,本章就一起来分析下原子类的实现机 ...
- Fantasy of a Summation LightOJ - 1213 (快速幂)
题意: 首先 只看第一层循环的A[0],是不是用了nk-1次 A[1]也是用了nk-1次······ 所以 第一层的sum(A[i]的和) 一共用了nk-1 所以第一层为sum * nk-1 因为又 ...
- 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 ...
- 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 ...
- 教程] 《开源框架-Afinal》之FinalHttp 01一步一脚
1.FinalHttp是什么 :FinalHttp 对 HttpClient再次封装,最简洁的就是增加了许多回调的方法,对Get 和 Post 请求进行了简化.另外一点就是FinalHttp加入线程池 ...
- Raspbian首次安装后无法使用SSH链接
使用Putty连接树莓派,出现Network Error:Connection Refused 新版的Raspbian系统默认禁用了SSH. 解决方法:在/boot分区创建名为"ssh&qu ...