CSS是一種用于網頁設計的樣式表語言,它可以讓我們輕松地定義網站的樣式和布局。今天我們將使用CSS來畫一幅佛像。
.buddha { width: 200px; height: 300px; border-radius: 100px; background-color: #f4e3d4; position: relative; } .head { width: 80px; height: 80px; border-radius: 40px; background-color: #debc9e; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); } .eyes { width: 20px; height: 20px; border-radius: 50%; background-color: #333; position: absolute; top: 40%; left: 40%; } .eyes::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .eyes.right { left: 60%; } .nose { width: 20px; height: 20px; border-radius: 50%; background-color: #debc9e; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .mouth { width: 40px; height: 10px; border-radius: 5px; background-color: #333; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%) rotate(-20deg); } .body { width: 140px; height: 200px; border-radius: 70px; background-color: #debc9e; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); } .hand { width: 40px; height: 100px; border-radius: 20px; background-color: #f4e3d4; position: absolute; top: 70%; left: 20%; transform: rotate(-30deg); } .hand::before { content: ""; width: 20px; height: 60px; border-radius: 10px; background-color: #debc9e; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .hand.right { left: 80%; transform: rotate(30deg); } .hand.right::before { transform: translate(-50%, 100%); }
我們定義了一個名為“buddha”的div,并設置了它的寬度、高度、圓角和背景色等屬性。然后,我們定義了佛像的各個部分,包括頭部、眼睛、鼻子、嘴巴、身體和手臂等,使用絕對定位和旋轉來達到佛像的形狀。
通過CSS畫圖,我們可以更好地掌握CSS的用法和原理,同時也可以提升我們的創意能力,為網頁設計帶來更多的可能性。
上一篇mysql帶外鍵數據導入
下一篇mysql帶兩個參數排序