CSS3是一種用于網頁設計的樣式表語言，它的強大和靈活性在設計中扮演了至關重要的角色，而人物設計更是其中一個重要的應用方向。
#person{
width: 300px;
height: 400px;
border: 2px solid #000;
border-radius: 50%;
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url(person.jpg);
background-size: cover;
position: relative;
}
#person:before{
content: "";
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
#person:after{
content: "";
width: 30px;
height: 40px;
border-radius: 50px 50px 0 0;
position: absolute;
top: 150px;
left: 50%;
transform: translateX(-50%);
background-color: #5f27cd;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
#person p{
color: #fff;
font-size: 20px;
text-align: center;
position: absolute;
top: 300px;
left: 50%;
transform: translateX(-50%);
}以上代碼展示了如何通過給一個
元素添加背景圖片和樣式屬性，實現純CSS做出一個擬人的效果。其中，border-radius屬性可以讓人物元素成為圓形，而background屬性則是利用了漸變和圖片進行美化。通過偽元素:before和:after來實現頭部和身體的效果，同時可以通過CSS的文本屬性來添加所需文字。
實際上，使用CSS3還可以利用眾多變形、動畫等特效屬性，創造出更加生動、逼真的人物效果。如要制作多個人物，也可以使用CSS選擇器來為不同的元素定義不同的效果，例：
#person1:before{
/*第一個人物的頭部樣式*/
}
#person2:before{
/*第二個人物的頭部樣式*/
}
/*其他的樣式屬性*/在實際開發的過程中，利用CSS3制作人物以及其他的創意設計，不僅可以讓網頁更具吸引力，還可以為用戶提供更好的視覺體驗。
上一篇css3內部樣式