前端(frontend)|用css让头像变圆且鼠标悬停在图片上时会发光 jsp|ssh框架

代码如下：

index.html

.img-circle { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }.img-circle:hover { -moz-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1); -webkit-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1); box-shadow: 0px 0px 25px rgba(0, 255, 178, 1); cursor: pointer; }Insert title here 文章图片

鼠标未移动在头像上时

鼠标移动到头像上时

如果头像太大，可以通过样式来限制，可以在
文章图片

效果如下：

另外， z-index值一定要比周围元素的要高，否则有可能出现头像被其他元素遮挡住，可以用.img-circle里加上z-index: 99;

如果还想在头像外加上一层border像光晕也是可以的，为突出效果，我设置body的背景颜色

完整代码如下：

body { background-color: #0D5193; } .img-circle { z-index: 99; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 8px solid; border-color: rgba(255, 255, 255, 0.2); }.img-circle:hover { -moz-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1); -webkit-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1); box-shadow: 0px 0px 25px rgba(0, 255, 178, 1); cursor: pointer; }Insert title here 文章图片