一、 制作一个相片墙
二、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
height: 400px;
border:1px solid black;
background-color: skyblue;
margin-top:100px;
text-align: center;/*这个属性是用来表示给内部五张图片是水平居中的*/
}
ul li {
list-style:none;
width: 150px;
height: 200px;
background-color: red;
display:inline-block;
transition:transform 1s;
position:relative;/*使用相对定位，是想把图片能够置顶*/
box-shadow: 0 0 10px;/*使图片有阴影*/
}
ul li:nth-child(1){
transform: rotate(30deg);
}
ul li:nth-child(2){
transform: rotate(-30deg);
}
ul li:nth-child(3){
transform: rotate(50deg);
}
ul li:nth-child(4){
transform: rotate(-50deg);
}
ul li image{
width: 150px;
height: 200px;
box-sizing:border-box;
}
ul li:hover{
/*transform:rotate(0px);*/
transform: scale(1.5);/*放大*/
z-index: 998;
}
</style>
</head>
<body>
<ul>
<li><img src="data:image/play_tennis2.jpg" alt=""></li>
<li><img src="data:image/play_tennis2.jpg" alt=""></li>
<li><img src="data:image/play_tennis2.jpg" alt=""></li>
<li><img src="data:image/play_tennis2.jpg" alt=""></li>
<li><img src="data:image/play_tennis2.jpg" alt=""></li>
</ul>
</body>
</html>
二、盒子阴影和文字阴影
1.如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影（内阴影就是inset）
2.盒子的阴影分为外阴影和内阴影，默认情况下就是外阴影
3.阴影颜色如果不写，那就默认是文字的颜色
4.省略的写法：box-shadow:水平偏移 垂直偏移 阴影扩展 ；
5.如何给文字添加阴影
text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D173_ShadowOfBoxAndWord</title>
<style>
*{
padding:0px;
margin:0px;
}
div{
height: 200px;
width: 200px;
margin:20px auto;
background-color: red;
border:1px solid black;
text-align: center;
line-height:200px;
font-size:30px;
box-shadow:10px 10px 10px 0px black;/*水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影*/
text-shadow:3px 3px 3px blue;
}
</style>
</head>
<body>
<div>我是盒子</div>
</body>
</html>
三、源码：
D172_PhotoWall.html
D173_ShadowOfBoxAndWord.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D172_PhotoWall.html
https://github.com/ruigege66/HTML_learning/blob/master/D173_ShadowOfBoxAndWord.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包