Css写头像 |html5 css点击图片放大缩小

.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url('path/to/avatar.jpg');
background-size: cover;
}

上述代码，以.avatar为选取器，指定宽度和高度都是100像素，并且使用border-radius属性使边框变为圆形。通过background-image属性指定头像的路径，background-size属性设置头像的大小为覆盖整个div容器。这样一个简单的头像样式就完成了。

如果大家想要为头像添加一些额外的效果，可以继续使用CSS提供的属性。比如，大家通过加阴影来让头像看起来更显著。

.avatar {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

这样就为头像添加了一层10像素宽度、透明度为0.5的黑色阴影。

总体来说，利用CSS来写头像的样式是非常简便的。只需采取适当的选择器和属性，就能实现非常炫酷的头像效果。