圆形头像实现
正方形头像
公式
- 圆形的半径=正方形的边长/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>