一、 制作一个相片墙
二、
<!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="image/play_tennis2.jpg" alt=""></li> <li><img src="image/play_tennis2.jpg" alt=""></li> <li><img src="image/play_tennis2.jpg" alt=""></li> <li><img src="image/play_tennis2.jpg" alt=""></li> <li><img src="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大数据学习视频礼包
