开发者社区> 小麻雀> 正文

CSS3的clip

简介:
+关注继续查看

一句话介绍

裁剪图像。


基本语法

.mkq {
    clip: <shape>|auto|inherit;
}

:函数功能,目前只有rect()可用

auto:和没剪裁过一样

inherit:继承父元素

举例:

.mkq{
    clip: rect(0,0,20px,0);
}

使用注意

  1. 只能在设置了position: absolute;\float: left;的属性上起作用

  2. 如果使用了auto,就包含border和padding


兼容性

还不错,但是在IE4-IE7需要把rect()里面的逗号去掉


Demo

链接:http://codepen.io/makaiqian/pen/ydzjm

中途出现了一点问题,已经解决。注意clip(,,,);这几个值是坐标值,而不是相对于上下左右的距离。


SVG

CSS与SVG有很多共同之处。

扩展链接:http://www.w3cplus.com/css3/css-svg-clipping.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS奇思妙想之-利用CSS裁剪(clip-path)完成各种图形
CSS奇思妙想之-利用CSS裁剪(clip-path)完成各种图形
66 0
CSS box model :盒子模型
CSS box model :盒子模型
28 0
CSS3——2D变形(CSS3) transform
CSS3——2D变形(CSS3) transform
99 0
CSS3——3D变形 transform
CSS3——3D变形 transform
81 0
CSS——CSS标签显示模式(display)
CSS——CSS标签显示模式(display)
76 0
玩转CSS基础——CSS3遮罩
*CSS mask* 遮罩属性的历史非常久远了,远到比 *CSS3 border-radius* 等属性还要久远,最早是出现在 *Safari* 浏览器上的,差不多可以追溯到 *2009* 年。
523 0
CSS - CSS Sprites Generator(雪碧图)
CSS - CSS Sprites Generator(雪碧图)
54 0
CSS3景深-perspective
3D视图正方体: 1 DOCTYPE html> 2 3 4 5 CSS3景深-perspective 6 7 8 #div1{ 9 position: relative; 10 ...
1482 0
+关注
小麻雀
文章
问答
视频
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载
相关实验场景
更多