CSS clip

CSS clip

此CSS属性指定元素的可见区域。它适用于绝对定位的元素
(position:absolute;)。通常在图像大于其包含元素时使用。
它允许我们定义一个矩形,该矩形被指定为用于裁剪绝对定位的元素的四个坐标。

语法

 clip: auto | shape | initial | inherit;

可能的值

auto:这是默认值,它按原样显示元素。不会有剪切。

示例

 <!DOCTYPE html>
<html>
<head>
    <style>
    .auto {
        position: absolute;
        width: 400px;
        height: 400px;
        clip: auto;
    }
    </style>
</head>
<body>
    <h2>clip: auto; property</h2>
    <img src="jtp.png" class="auto">
</body>
</html>
shape:用于剪切元素。它剪切元素的定义区域。其有效值为
rect(顶部,右侧,底部,左侧)。

示例

 <html>
<head>
    <style type="text/css">
    div {
        background: url(jtp.png);
        clip: rect(0px, 150px, 250px, 0px);
        border: 3px solid red;
        height: 200px;
        width: 250px;
        position: absolute;
    }
    </style>
</head>
<body>
</body>
</html>
输出:

CSS clip_https://bianchenghao6.com_【CSS 教程】_第1张