最近在學習CSS,實踐了一下如何用CSS畫出蒙娜麗莎的形象。
.monolisa { background-color: #F2DFB8; width: 500px; height: 700px; border-radius: 10px; position: relative; } .head { background-color: white; width: 200px; height: 200px; border-radius: 50%; position: absolute; top: 80px; left: 150px; } .eye { background-color: black; width: 30px; height: 30px; border-radius: 50%; position: absolute; top: 110px; left: 180px; } .nose { border-top: 20px solid transparent; border-bottom: 70px solid black; border-left: 10px solid transparent; border-right: 10px solid transparent; width: 0; height: 0; position: absolute; top: 250px; left: 245px; } .mouth { border-bottom: 100px solid black; border-left: 70px solid transparent; border-right: 70px solid transparent; width: 0; height: 0; position: absolute; top: 330px; left: 215px; }
首先我給蒙娜麗莎的頭部加了一個白色圓形,然后在這個圓形中加上了兩個黑色的圓形,作為眼睛。接著,在她的鼻子下方添加了一個三角形,作為鼻子,最后是她的嘴巴。
整個蒙娜麗莎的形象已經(jīng)呈現(xiàn)出來。當然,CSS畫出來的蒙娜麗莎并不如真實的蒙娜麗莎那么完美,但是從這個小實踐中我獲得了很多關于CSS的思路。