CSS卷角是一種常見的效果，通常用于制作頁面元素的圓角、邊框等效果。CSS3之前，制作圓角需要使用圖片或JavaScript，但現(xiàn)在使用CSS就可以輕松實現(xiàn)。下面我們來通過代碼演示如何制作一個卷角效果。

.box{
width: 100px;
height: 100px;
background-color: #fff;
border: 1px solid #ccc;
position: relative;
}
.box:before{
content: "";
position: absolute;
top: -10px;
right: -10px;
border-top: 10px solid #fff;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
transform: rotate(45deg);
}

代碼解析：

首先我們需要創(chuàng)建一個容器，這里使用class名box。然后我們設(shè)置寬度、高度、背景色、邊框等基本樣式。

接著，在容器內(nèi)部創(chuàng)建一個偽元素:before。設(shè)置content為空，position為absolute以便于定位，top和right分別為負(fù)10px以便于調(diào)整位置。

然后我們分別為偽元素的四個邊設(shè)置寬度和顏色，從而實現(xiàn)一個三角形的形狀。注意：為了實現(xiàn)卷角效果，我們需要讓右上角和右邊的兩個邊的寬度和顏色和偽元素的背景色一致，比如這里我們設(shè)置為白色（#fff）。

最后我們將偽元素旋轉(zhuǎn)45度，這樣就能實現(xiàn)一個卷角效果啦！

可以看到，使用CSS制作卷角效果非常簡單。我們可以根據(jù)需要調(diào)整寬度、高度、顏色等參數(shù)，甚至可以使用CSS動畫效果讓卷角慢慢展開。希望這篇文章能夠?qū)δ阌兴鶐椭x謝閱讀！