這是一篇關(guān)于用CSS畫(huà)一個(gè)大耳朵圖圖的文章。
/* 首先我們需要定義耳朵的形狀 */ .ear { width: 100px; height: 200px; background-color: pink; border-radius: 100px 100px 0 0; } /* 然后我們需要畫(huà)出耳朵的內(nèi)部 */ .inner-ear { width: 80px; height: 160px; background-color: white; border-radius: 80px 80px 0 0; margin-top: 20px; margin-left: 10px; } /* 接下來(lái)我們需要畫(huà)出耳朵的陰影效果 */ .shadow { width: 20px; height: 20px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); margin-top: -8px; margin-left: 48px; box-shadow: 10px 0 20px rgba(0, 0, 0, 0.2); } /* 最后我們將耳朵和陰影部分組合在一起 */ .ear.left { float: left; transform: rotate(-10deg); margin-top: 50px; margin-left: 50px; } .ear.right { float: right; transform: rotate(10deg); margin-top: 50px; margin-right: 50px; } /* 添加一些樣式來(lái)美化我們的圖圖 */ body { background-color: #3B3B3B; } .container { width: 300px; margin: auto; margin-top: 100px; }
最終效果如下: