Css 简明教程
CSS - Clip (Obsolete) Property
CSS剪切属性用于为元素创建剪切区域，该区域定义元素的可视区域。
clip 属性仅适用于具有绝对定位或固定定位的元素。本章将讨论如何使用 clip 属性。
以下是 clip 属性可以使用的所有可能值：
-
auto - 默认情况下元素可见。
-
<shape> - clip 属性的 rect(top, right, bottom, left) 值定义一个矩形裁剪区域。顶部和底部值表示到顶部边框的距离，而右侧和左侧的值表示到左侧边框的距离。
CSS clip - auto Value
CSS clip: auto 属性不会裁剪元素，因此整个元素都是可见的。此属性适用于具有 position:absolute 或 position:fixed 属性的元素。它是默认值。
<html>
<head>
<style>
.clip-auto {
position: absolute;
width: 200px;
background-color: #3be028;
padding: 10px;
clip: auto;
}
</style>
</head>
<body>
<div class="clip-auto">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>以下示例演示了图像不会被裁剪，并且将在其边界内完全可见 -
<html>
<head>
<style>
.clip-auto-img {
position: absolute;
width: 150px;
padding: 10px;
clip: auto;
}
</style>
</head>
<body>
<img src="images/tree.jpg" class="clip-auto-img"/>
</body>
</html>CSS clip - rect() Value
您可以设置 clip: rect(top, right, bottom, left) 属性为元素指定一个矩形裁剪区域。顶部、右侧、底部和左侧的值可以是长度或自动。如果为自动，元素将被裁剪到相应的边框边缘。
<html>
<head>
<style>
.clip-rect {
position: absolute;
width: 200px;
background-color: #3be028;
padding: 10px;
clip: rect(0px, 100px, 150px, 0px);
}
</style>
</head>
<body>
<div class="clip-rect">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>以下示例演示了如何使用 rect() 值裁剪图像并使其显示在屏幕的左上角 -
<html>
<head>
<style>
.clip-rect-img {
position: absolute;
width: 150px;
padding: 10px;
clip: rect(0px, 200px, 160px, 0px);
}
</style>
</head>
<body>
<img src="images/tree.jpg" class="clip-rect-img"/>
</body>
</html>