您的位置：首页 > Web前端 > CSS

CSS中内容的剪切属性clip

2013-01-10 11:08 489 查看

1. 在CSS中，可以使用剪切属性对元素内容的可视化区域进行控制，剪切区域所使用的属性时clip属性，

用来裁剪元素的可视化区域，内容的剪切属性可以使用2种属性值，一种为auto值，另一种为区域值，语法结构：

clip: auto | rect(number, number, number, number)

其中，rect中定义的4个属性值是以元素左上角为中心，按照上、右、下、左的顺序定义的剪切区域的4条边线，

在4条边线规定的区域中将显示元素内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS属性 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.clip {
position: absolute;
top: 20px;
left: 20px;
clip: rect(10px 140px 40px 80px) !important;
width: 200px;
height: 200px;
background: #666666;
}
.main {
width: 300px;
height: 300px;
background: #999999;
}
</style>
</head>

<body>
<div class="main">
<div class="clip"></div>
</div>
</body>
</html>

如上图所示，在子元素中，只有被定义剪切属性的区域部分才能够显示，其他部分以透明的方式显示。

2. 剪切属性与内容

在使用剪切属性的时候，元素内容的显示方式并不发生改变，元素中的内容在剪切区域之外的部分将会消失，但是元素占有的空间

并不会发生改变。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS属性 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.clip {
position: absolute;
top: 20px;
left: 20px;
clip: rect(5px 140px 80px 20px);
width: 200px;
height: 200px;
background: #666666;
}
.main {
width: 200px;
height: 200px;
background: #999999;
}
</style>
</head>

<body>
<div class="main">
<div class="clip">这里是剪切元素中的内容，注意内容被裁减的情况。</div>
</div>
</body>
</html>

在子元素中存在部分文本内容，当使用剪切属性后，部分文本内容和背景将会消失，但是原有文本内容的所在位置不发生变化。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航