人头像是网站个人资料页面常见的元素,为了让网站个性化和有趣,常常需要使用CSS来制作人头像。首先,在HTML中添加一个div元素用来包裹整个头像,设置宽和高为100px,并设置圆角边框。<
<div class="avatar"></div> .avatar { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #ccc; }
<div class="avatar"> <img src="user_avatar.jpg" alt="User Avatar"> </div> .avatar img { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<div class="avatar"> <img src="user_avatar.jpg" alt="User Avatar"> </div> .avatar img:hover { width: 110px; height: 110px; border-radius: 55%; border: 2px solid #fff; position: absolute; top: 48%; left: 48%; transform: translate(-50%, -50%); }
粉丝
0
关注
0
收藏
0