現在我們來學習如何使用CSS模擬采耳

.ear {
position: relative;
width: 150px;
height: 150px;
background-color: #ffd9b6;
border-radius: 50%;
margin: 0 auto;
}
.ear:before {
content: '';
position: absolute;
top: 40px;
left: 45px;
width: 60px;
height: 80px;
background-color: #2f2f2f;
border-radius: 50% 50% 0 0;
transform: rotate(-20deg);
z-index: -1;
}
.ear:after {
content: '';
position: absolute;
top: 30px;
left: 50px;
width: 50px;
height: 70px;
background-color: #ffe5cc;
transform: rotate(-20deg);
border-radius: 50%;
z-index: -2;
}

通過在HTML文件中添加一個類名為“ear”的div元素，在CSS中設置相關屬性即可實現采耳的效果。透過以上代碼清楚見到，.ear類名的div元素設定了寬度、高度、背景顏色和邊界半徑，使它看起來像一個耳朵。在偽類: before和: after中，我們設定了不同的背景顏色和旋轉角度，以使它們看起來不同于主div元素。通過這種方法，我們可以使用CSS來模擬采耳。