超简单的HTML镜子实现你懂了吗?
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#jingzi{
width: 300px;
height: 300px;
border:2px solid darkgrey;
border-radius: 50%;
background-image: url(../img/1.jpg);
background-size: contain;
}
#jing{
width: 300px;
height: 180px;
border: 1px solid bisque;
border-radius: 50%;
background-image: url(../img/2.jpg);
background-size: 100% 100%;
box-shadow: 3px 3px 3px #A9A9A9;
}
</style>
</head>
<body>
<div id="jingzi">
</div>
<div id="jing">
</div>
</body>
</html>
结果图: