一、 製作一個相片牆 二、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } ul{ height: 400px; ...
一、 製作一個相片牆
二、
<!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大數據學習視頻禮包
