clip:rect()
2016-06-16 12:55
591 查看
写进度条的时候用过这个方法,记录一下
它的用法是
方向是按顺时针走的。
具体这四个值代表什么意思,看下面这几张图就明白了。
![](https://images2015.cnblogs.com/blog/687953/201606/687953-20160616124410479-2133942896.jpg)
![](https://images2015.cnblogs.com/blog/687953/201606/687953-20160616124421885-1573189793.jpg)
Demo
结果如下
![](https://images2015.cnblogs.com/blog/687953/201606/687953-20160616124434854-768802337.jpg)
它的用法是
.test{ clip: rect(<top>, <right>, <bottom>, <>left); }
方向是按顺时针走的。
具体这四个值代表什么意思,看下面这几张图就明白了。
![](https://images2015.cnblogs.com/blog/687953/201606/687953-20160616124410479-2133942896.jpg)
![](https://images2015.cnblogs.com/blog/687953/201606/687953-20160616124421885-1573189793.jpg)
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>
结果如下
![](https://images2015.cnblogs.com/blog/687953/201606/687953-20160616124434854-768802337.jpg)
![](https://images2015.cnblogs.com/blog/687953/201606/687953-20160616124448276-419038317.png)
相关文章推荐
- 在职场中混,"讲演稿"的重要性
- Linux下安装启动多个Tomcat的配置
- 关于开通博客的一些感想
- 工作实用
- Activity的总结
- mingw编译x264 出错undefined reference to `__sync_add_and_fetch_4
- HDU 3488 最小费用流
- android 国内工具站
- android中如何使用隐藏的api和internal包
- python(二)
- android应用程序如何调用支付宝接口
- 华为OJ平台——杨辉三角的变形
- Java的HTTP通信
- Eclipse开发Android程序在手机上运行
- 从软件导入数据功能, 看人员沟通问题
- java的4个核心技术
- 工厂模式的理解
- 文章标题
- libuv学习笔记(12)
- sql笔试