宫格头像简代码

屿风

屿风

1. <style>
   
2. .attach-col5 {
   
3.   column-count:4;
   
4.   column-gap:8px;
   
5.   max-width:900px;
   
6.   margin:12px auto;
   
7. }
   
8. .attach-col5 a {
   
9.   display:block;
   
10.   border-radius:12px;
    
11.   overflow:hidden;
    
12. }
    
13. .attach-col5 img {
    
14.   width:99%;
    
15.   height:auto;
    
16.   display:block;
    
17.   margin-bottom:12px;
    
18.   break-inside:avoid;
    
19.   border-radius:8px;
    
20.   transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    
21. }
    
22. /* hover图片上浮 */
    
23. .attach-col5 img:hover {
    
24.   transform: translateY(-6px) !important;
    
25.   box-shadow: 0 8px 16px rgba(0,0,0,0.18) !important;
    
26. }
    
27. @media(max-width:1000px){.attach-col5{column-count:3;}}
    
28. @media(max-width:640px){
    
29.   .attach-col5{column-count:2;column-gap:4px;max-width:100%;}
    
30.   .attach-col5 img{width:100%;}
    
31. }
    
32. </style>
    
33. <div class="attach-col5">
    
34. 
    
35. <图片插入位置>
    
36. 
    
37. </div>
    

复制代码