一、Css3图片阴影效果_Css3相册阴影效果（二）
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background: #fafafa; } .img { width: 500px; height: 200px; background: white; position: relative; left: 100px; top: 100px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1) inset; } .img::after { content: ''; width: 90%; height: 50%; border-radius: 10%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; background: rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1); z-index: -1; } </style> </head> <body> <!-- 图片阴影效果2 --> <div class="img"></div> </body> </html>
二、显示过程如下：
更多：