浅谈css中的clip剪裁用法

日期:2020-10-17 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

clip 特性是用来设定元素的样子。用来裁剪肯定精准定位元素(absolute or fixed)。

clip有3种赋值:auto |inherit|rect。inherit是承继,ie不适用这个特性, auto是默认设置  前两个基础属于打酱油的,大家关键来讲1下clip的rect特性。

clip的rect特性 : clip:rect(top,right,bottom,left)4个特性值不能缺乏;

这4个特性值究竟是怎样测算的呢 先看下边这张图

 

rect的top,right,bottom,left是根据左上角来测算的

看来1个小demo吧 

html:

XML/HTML Code拷贝內容到剪贴板
  1. <div id="demo">  
  2.     <u class="c1"></u><u class="c2"></u>  
  3.  </div>  

css:

XML/HTML Code拷贝內容到剪贴板
  1. #demo { position: relative; border: 1px solid #ccc; width:140px; height: 140px; padding-top: 20px; }   
  2.  #demo u { width: 128px;height: 128px; position: absolute; background: url(words.png) 0 ⑹24px no-repeat;transition: all .5s ease-in-out 0s}   
  3.  #demo p { text-align: center; line-height: 120px; background: url(words.png) 400px ⑹24px no-repeat}   
  4.  #demo .c1 { clip: rect(0,128px,0,64px);}   
  5.  #demo .c2 { clip:rect(128px,64px,128px,0px)}   
  6.  #demo:hover>.c1 {clip:rect(0px,128px,128px,64px)}   
  7.  #demo:hover>.c2 {clip:rect(0px,64px,128px,0)}  

初学者1枚,如有不正确,欢迎纠正。

每日发展1点点便是获得。

以上这篇浅谈css中的clip剪裁用法便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/chenmeng0818/archive/2016/07/18/5682389.html