CSS3是一種強大的技術,可以用它來實現各種效果,比如畫一個微笑。
.smile { width: 200px; height: 200px; border: 10px solid #000; border-radius: 200px; position: relative; } .smile::before { content: ""; width: 70px; height: 70px; background-color: #fff; border: 10px solid #000; border-radius: 50%; position: absolute; top: 45px; left: 65px; } .smile::after { content: ""; width: 70px; height: 70px; background-color: #fff; border: 10px solid #000; border-radius: 50%; position: absolute; top: 45px; right: 65px; } .smile::before .smile::after { content: ""; width: 30px; height: 30px; background-color: #000; border-radius: 50%; position: absolute; top: 25px; left: 20px; }
上面是一個簡單的CSS代碼,使用了偽元素::before和::after來畫出微笑的嘴巴。通過設置圓角屬性border-radius,可以讓整個圖形變成圓形,再利用定位屬性position來控制各個元素的位置和層疊順序,最終完成了一個微笑。