【广州前端】有意思的css3属性(四)-clip裁剪属性 - 黑马程序员技术交流社区

所有主流浏览器都支持 clip 属性，当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)

默认值。不应用任何剪裁。

规定应该从父元素继承 clip 属性的值。

【代码与效果】

注意：要配合绝对定位来使用

[size=12.0000pt]1. 普通使用，效果如下图

file:///C:\Users\WCM\AppData\Local\Temp\ksohtml\wps43C7.tmp.jpg

[HTML] 纯文本查看 复制代码

<html>

<head>

<style type="text/css">

img 

{

position:absolute;

clip:rect(0px 50px 200px 0px)

}

</style>

</head>

<body>

<p>clip 属性剪切了一幅图像：</p>

<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>

</body>

</html>

[size=12.0000pt]1. 加了一些css3的动画配合之后，clip属性可以做出一些好玩的效果

file:///C:\Users\WCM\AppData\Local\Temp\ksohtml\wps43D8.tmp.png

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="UTF-8">



  <meta name="viewport" content="width=device-width, initial-scale=1.0">



  <meta http-equiv="X-UA-Compatible" content="ie=edge">



  <title>Document</title>



  <style>div{



      width: 190px;



      height: 190px;



      background: aqua;



      position: relative;



     



    }



    div:before,



    div::after



    {



      position: absolute;



      content: "";  



      left: -5px;



      right: -5px;



      top: -5px;



      bottom: -5px;



      border: 5px solid #ff00ff88;



    }



    div:before{



      animation: move 2s linear infinite  alternate;



    }



    div:after{



      /* alternate 动画应该轮流反向播放： */



      border-color: #ff000088;



      animation: move 2s linear infinite alternate -1.5s;



    }



    



    @keyframes move{



      /* css  -clip属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。 */



            /* 设置元素的形状。唯一合法的形状值是rect (top, right, bottom, left) */



      0%,100%{



        clip: rect(0,200px,5px,0);



      }



       25%{



        border-color: blue;



 



        clip: rect(0,200px,200px,195px);



      } 



      50%{



        border-color: green;



        clip: rect(195px,200px,200px,0);



      }



      75%{



        border-color: yellow;



 



        clip: rect(0,5px,200px,0px);



      } 



    }



   </style>



</head>



<body>



    <div>传智播客</div>



</body>



</html>

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。