【简介】 所有主流浏览器都支持 clip 属性，当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。 【说明】 clip属性 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。 【值】 值 | | | 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) | | | | |
【代码与效果】 注意： 要配合绝对定位来使用 [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>
| 
收藏
淘帖
踩
