CSS是一門用于網頁排版的語言，除了能夠調整字體、顏色、背景等方面的樣式以外，還可以利用CSS來制作形象生動的圖案，比如眼睛。
制作一個CSS眼睛，我們需要先設置一個外層
來作為眼睛的容器，然后用一個內層
來作為眼球。在內層
上設置圓形樣式和背景顏色，如下：
.eye {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
background-color: #fff;
}
.eyeball {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
background-color: #000;
}接下來，我們需要為眼球設置兩個小球，分別表示瞳孔和反光。我們可以通過在內層
中添加兩個
，并均分它們的寬度來實現。
.eyeball {
/* 上面的樣式代碼 */
overflow: hidden;
}
.pupil {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background-color: #000;
}
.reflection {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
background-color: #fff;
}在代碼中，我們為內層
設置overflow: hidden;，這是為了防止內部的小球超出容器范圍。接下來就是為每個小球設置具體的樣式，其中瞳孔（.pupil）為黑色，反光（.reflection）為白色。
以上就是制作CSS眼睛的代碼。利用CSS妙手，我們不僅可以制作出美觀的網頁，還可以創造出形態各異的圖形。讓我們在不斷的學習和實踐中掌握更加高超的技巧，創造出更加精美的網頁設計吧！
下一篇css怎么寫鼠標滾動