CSS紅包效果是一種常見的網頁裝飾效果，也是很多網頁設計者喜歡使用的一個小細節(jié)。

要實現(xiàn)CSS紅包效果，首先需要創(chuàng)建一個div元素，然后在該元素中添加一個偽元素，這個偽元素將成為紅包的撕開口。代碼如下：

.red-envelope {
position: relative;
width: 150px;
height: 100px;
background: red;
border-radius: 10px;
margin: 100px auto;
cursor: pointer;
}
.red-envelope::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 50%;
border: 30px solid transparent;
border-bottom-color: white;
transform: translate(-50%, 0);
}

在這段CSS代碼中，首先定義了一個名為.red-envelope的class，這是用來定義整個紅包的樣式的。其中position屬性設為relative，為了使其內部的偽元素的定位能以該元素為基準，寬度和高度分別設為150px和100px，背景色設為紅色，邊框圓角設為10px，margin設為100px auto，使其居中顯示。cursor屬性設為pointer，為了當鼠標移動到紅包時，鼠標樣式能變?yōu)槭中巍?/p>

接下來，使用偽元素::before來實現(xiàn)紅包撕開口的效果。由于該元素是偽元素，所以使用content屬性來添加內容，display屬性設為block，使其以塊狀元素顯示。position屬性設為absolute，top和left屬性設為0和50%，使其定位到原元素的頂部中央。border屬性用來創(chuàng)建三角形，其中30px的值是指三角形的高度，transparent表示三角形三個角的顏色為透明，border-bottom-color屬性設為white，表示三角形底邊的顏色為白色。最后使用transform屬性使其向上平移30px，使三角形位于原紅包的上方，同時使其水平方向上居中。