在網頁中可以使用CSS樣式來畫圖,接下來讓我們一起來嘗試畫一輛小汽車。
.car { width: 200px; height: 100px; background-color: #bfbfbf; position: relative; } .car:before { content: ""; width: 60px; height: 60px; background-color: #4d4d4d; position: absolute; bottom: 0; left: 20px; border-radius: 10px; } .car:after { content: ""; width: 60px; height: 60px; background-color: #4d4d4d; position: absolute; bottom: 0; right: 20px; border-radius: 10px; } .car .door { width: 30px; height: 60px; background-color: #4d4d4d; position: absolute; bottom: 0; left: 45px; border-radius: 10px; } .car .roof { width: 100px; height: 40px; background-color: #4d4d4d; position: absolute; top: 0; left: 50%; margin-left: -50px; border-radius: 10px; } .car .wheel { width: 50px; height: 50px; background-color: #333; position: absolute; bottom: 0; left: 0; border-radius: 50%; transform: translateX(20px); } .car .wheel:last-child { left: auto; right: 0; transform: translateX(-20px); }
上述代碼中,我們使用了:before和:after偽元素來分別畫出了小汽車的左右兩個車燈,使用.door選擇器畫出了車門,使用.roof選擇器畫出了車頂,使用.wheel選擇器畫出了車輪。
最后,我們可以在HTML中使用.car類來展示這輛小汽車:
<div class="car"> <div class="door"></div> <div class="roof"></div> <div class="wheel"></div> <div class="wheel"></div> </div>
通過以上的CSS樣式和HTML結構,我們成功地畫出了一輛小汽車,可以在網頁上展示。
上一篇css樣式怎么創建6