CSS3按范圍裁剪是一種CSS3新技術(shù)，可以用來裁剪元素的某些部分來呈現(xiàn)不同的效果。

div{
width:200px;
height:200px;
border-radius:50%;
overflow:hidden;
/* 圓形圖片效果 */
}
img{
display:block;
max-width:100%;
}

上面的代碼演示了一個簡單的圓形圖片效果。我們先將一個正方形的div元素設(shè)置為寬高均為200px，然后使用border-radius屬性將其變?yōu)閳A形。接著將overflow屬性設(shè)置為hidden，可防止圖片溢出。最后使用img元素放置圖片。由于img元素是一個內(nèi)聯(lián)元素，所以需要將其display屬性設(shè)置為block，以便讓圖片居中顯示。

div{
width:200px;
height:200px;
background:linear-gradient(45deg, red, blue, yellow, green);
clip-path:polygon(0 0, 100% 0, 100% 75%, 0 100%);
/* 多邊形背景效果 */
}

另外一種使用CSS3按范圍裁剪的效果是多邊形背景。在上面的代碼中，我們使用了linear-gradient屬性為div元素設(shè)置了一個斜角漸變背景。然后使用clip-path屬性將背景裁剪成一個三角形，其中polygon函數(shù)的四個參數(shù)分別代表了多邊形各個頂點的位置。