圆形头像实现
正方形头像
公式
- 圆形的半径=正方形的边长/2
- border-radius：半径 半径 半径 半径
/*border-radius 左上 右上 右下 左下 顺时针方向 */
不规则大小头像
对于不规则的头像，比如长方形，我们可以牺牲图片的高度，让图片高度=图片宽度
公式
- height=width
- 圆的半径=width/2
- border-radius: 半径 半径 半径 半径
比如下面这张图（500*625），我们可以令height=width
/*标签选择器*/ img{ width:500px; height:500px; border-radius:250px 250px; }
效果：脸确实是变短了，但美女还是美女
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> img{ border-radius: 250px 250px; height: 500px; width: 500px; } </style> </head> <body> <div> <img src="../img/a.jpg"> </div> </body> </html>
头像发光实现
阴影
通过阴影来实现
语法
box-shadow: 10px 10px 100px pink; /* 参数说明: 阴影在 X 轴上的偏移量为 10 像素 阴影在 Y 轴上的偏移量为 10 像素 模糊度 100 像素 颜色 粉色 */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> img{ width: 270px; height: 270px; border-radius: 135px; box-shadow: 10px 10px 100px yellow; } </style> </head> <body> <div style="text-align: center"> <img src="../img/悟空.jpeg"> </div> </body> </html>
