剪裁

clip (不推荐使用)

clip的优势:clip 属性是CSS中出现的第一种剪裁。clip是运行在浏览器中的,它可能会一直有效。而浏览器对它的支持是非常强大的:几乎是有史以来的每一个浏览器。

clip的劣势:clip 只对绝对定位的元素有效,clip 只能用于矩形,即rect()函数。

格式:

clip: rect(top, right, bottom, left);

如:

<div class="mode">
  <div class="bg"></div>
</div>
.mode {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg {
  width: 300px;
  height: 300px;
  background: repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
  border-radius: 50%;
  position: absolute;
  clip: rect(0,200px,200px,0);
}

参考: http://www.zhangxinxu.com/study/201103/css-rect-demo.html

clip-path

参考 demo: http://bennettfeely.com/clippy/

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress