Css 简明教程
CSS - Clip (Obsolete) Property
CSS剪切属性用于为元素创建剪切区域，该区域定义元素的可视区域。
CSS clipping property is used to create a clipping region for an element, which defines the visible area of the element.
clip 属性仅适用于具有绝对定位或固定定位的元素。本章将讨论如何使用 clip 属性。
The clip property only applies to elements with absolute or fixed positioning. This chapter discusses how to use clip property.
以下是 clip 属性可以使用的所有可能值：
Following are all possible values that can be used for clip property:
-
auto − The element is visible by default.
-
<shape> − The rect(top, right, bottom, left) value for the clip property defines a rectangular clipping region. The top and bottom values refer to the distance from the top border, while the right and left values refer to the distance from the left border.
CSS clip - auto Value
CSS clip: auto 属性不会裁剪元素，因此整个元素都是可见的。此属性适用于具有 position:absolute 或 position:fixed 属性的元素。它是默认值。
CSS clip: auto property does not clip the element, so the entire element is visible. This property applies to elements which have the position:absolute or position:fixed property. It is the default value.
<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>以下示例演示了图像不会被裁剪，并且将在其边界内完全可见 -
The following example demonstrates that the image will not be cropped, and it will be fully visible within its boundaries −
<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) 属性为元素指定一个矩形裁剪区域。顶部、右侧、底部和左侧的值可以是长度或自动。如果为自动，元素将被裁剪到相应的边框边缘。
You can set the clip: rect(top, right, bottom, left) property to specify a rectangular clipping region for an element. The top, right, bottom, and left values can be a length or auto. If auto, the element is clipped to the corresponding border edge.
<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() 值裁剪图像并使其显示在屏幕的左上角 -
The following example demostrate how to use the rect() value to crop an image and make it visible at the top-left corner of the screen −
<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>