CSS3的技術帶給我們許多驚喜，其中CSS3的clip屬性讓我們可以方便地截取圖片，下面來看看具體的操作方法。 首先，我們需要準備一張圖片，我們選擇了一張cute的貓頭圖片，然后給它定義一個類名。

.cute-cat {
width: 300px;
height: 300px;
background-image: url('cute_cat.jpg');
background-size: 100% auto;
}

以上就是貓頭的定義，接下來我們定義一個類名為clip-image來截取它的一部分。

.clip-image {
width: 150px;
height: 150px;
background-image: url('cute_cat.jpg');
background-size: 300px 300px;
clip: rect(100px, 200px, 200px, 100px);
}

其中，clip屬性的rect值為四個位置的坐標值，分別為top、right、bottom和left，這里取的是從左上角到右下角的200 * 100的矩形。 最后，我們在HTML中添加兩個div標簽，并為它們添加上述的類名，如下所示。

<div class="cute-cat"></div>
<div class="clip-image"></div>

到此，我們成功地截取了貓頭中的一部分，并展示在了網頁中。CSS3的clip屬性為我們的設計帶來了更大的自由度，讓我們的創意更加豐富。