CSS是一種用于網頁設計的語言，它可以讓我們對網頁的樣式進行自由的控制。CSS的其中一種效果就是鋸齒效果。鋸齒效果在頁面設計中是一個常見的設計元素。

/* 鋸齒效果的CSS代碼 */
.jagged {
background-color: #f9f9f9;
width: 200px;
height: 200px;
position: relative;
}
.jagged::before {
content: "";
position: absolute;
top: -10px;
left: 0;
width: calc(100% + 20px);
height: 20px;
background-color: #f9f9f9;
transform: rotate(-3deg);
transform-origin: top left;
z-index: -1;
}
.jagged::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: calc(100% + 20px);
height: 20px;
background-color: #f9f9f9;
transform: rotate(3deg);
transform-origin: bottom left;
z-index: -1;
}

上面的代碼是一個簡單的鋸齒效果的CSS樣式。我們可以將它添加到頁面上的任何元素中，而不會對元素的其他樣式產生任何干擾。CSS的基本規則是，后面的樣式覆蓋前面的樣式。

你可能已經注意到，在這個CSS樣式中使用了偽元素::before和::after。這些元素不會在頁面上呈現任何內容，但可以用于添加額外的樣式。在這個樣式中，我們使用這些元素添加了兩個三度角度的白色背景色條紋，以使元素看起來更像一個鋸齒。

如果你想讓你網站上的元素看起來更鋸齒，那么這個鋸齒效果的CSS樣式可以是一個不錯的選擇。