提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css怎样剪切元素?​clip属性的运用【css教程】,css,​clip

我们能够运用css clip属性来剪切元素的地区,仅保存元素的一部份可见,被留下了的可见元素部份称为剪辑地区。本篇文章就给人人引见css clip属性是怎样剪切元素的,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你们有所助。

在css中,clip属性只能在设置了相对定位:“position:absolute”或许牢固定位:“position:fixed”属性的元素上起作用。它对设置了相对定位:“position:relative”或静态定位:“position:static”属性的元素上没有任何影响。

运用时clip,我们能够指定向内的偏移量,以指定要剪切的元素边沿的地区。

clip属性仅接收一个外形函数,即rect()函数,作为值。下面我们来看看rect()函数基础语法:

rect(< top >,< right >,< bottom >,< left >);

我们能够看出,rect()函数采纳四个参数,这些参数分别是从元素的顶部和左侧边境向内偏移的偏移量。

顶部和底部值都定义来自顶部边境的偏移,而左侧和右边值都定义来自左侧边境的偏移。


显现剪辑属性偏移量

裁剪地区或在裁剪元素后坚持可见的元素部份由rect()函数的偏移量定义,rect()函数能够建立的矩形外形,如上图所示。

元素的剪切地区会把剪切地区以外的元素的任何方面(比方,内容,子项,背景,边框,文本润饰,表面等)剪切掉。已剪切的内容不会致使溢出。

clip属性的运用

基础语法:

clip: auto | rect() | inherit;

rect() 函数的语法:

rect(<top>, <right>, <bottom>, <left>)

<top>, <right>, <bottom>, <left>里都是运用长度值来设置的

申明:

1、auto:该元素未被剪裁。

2、inherit:元素从其父级继续其clip值。

3、rect():指定矩形剪切地区。也就是说,它指定在剪切元素后的可见的元素地区是矩形的。

rect()函数有四个参数。这些参数能够是逗号分开或空格分开。

rect(< top >,< right >,< bottom >,< left >)/ *规范语法* /
/* 要么 */
rect(< top >  < right >  < bottom >  < left >)/ *向后兼容语法* /

rect()函数还接收关键字auto作为偏移量。值auto示意裁剪地区的给定边沿将与元素的边境框的边沿雷同。

rect()函数的参数:顶部,右边,底部和左侧偏移也接收负长度值。

例:元素的部份垂直地坚持在“40px”和“150px”之间,而且程度地坚持在“80px”和“260px”之间

img {     
   clip:rect(275px,575px,425px,365px);
}

效果图:


显现剪切元素后的可见地区示例

在Internet Explorer 4到7支撑较旧的空格分开语法,因而为了确保剪辑在这些浏览器中有用,我们能够两种要领都写上:

img {     
    clip:rect(40px 260px 150px 80px); / * IE 4到7 * / 
    clip:rect(40px,260px,150px,80px); / * IE8 +和其他浏览器* /
}

clip属性的示例:

html代码:

<div class="container">
  <p>
   在四个图象上悬停,以检察它们的剪辑地区睁开。
  </p>
  <div class="element element-1">
    <img src="images/cat-1.jpg" alt="">
  </div>
  <div class="element element-2">
    <img src="images/cat-4.jpg" alt="">
  </div>
  <div class="element element-3">
    <img src="images/cat-3.jpg" alt="">
  </div>
  <div class="element element-4">
    <img src="images/cat-2.jpg" alt="">
  </div>
</div>

css代码:

.container {
  margin: 40px auto;
  width: 300px;
  position: relative;
}

.element {
  width: 300px;
  height: 300px;
  z-index: 0;
  position: absolute;
  -webkit-transition: clip .4s ease-in-out, z-index .2s linear .4s;
  transition: clip .4s ease-in-out, z-index .2s linear .4s;
}

img {
  max-width: 100%;
}

.element-1 {
  background-color: #2c3e50;
  clip: rect(0px, 150px, 150px, 0px);
}

.element-2 {
  background-color: #f39c12;
  clip: rect(0px, 300px, 150px, 150px);
}

.element-3 {
  background-color: #16a085;
  clip: rect(150px, 150px, 300px, 0px);
}

.element-4 {
  background-color: #8e44ad;
  clip: rect(150px, 300px, 300px, 150px);
}

.element:hover {
  z-index: 1;
  -webkit-transition: clip .4s ease-in-out .2s, z-index .2s linear;
  transition: clip .4s ease-in-out .2s, z-index .2s linear;
  clip: rect(0px, 300px, 300px, 0px);
}

效果图:

浏览器支撑度

一切主流浏览器都支撑clip属性:Chrome,Firefox,Safari,Opera,Internet Explorer以及Android和iOS。

Internet Explorer版本7回到4支撑旧的空格分开rect()语法。从IE8最先支撑规范的逗号分开语法。

总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。

以上就是css怎样剪切元素?​clip属性的运用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css怎样剪切元素?​clip属性的运用【css教程】,css,​clip"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线