【CSS】一个多重边框实现的相框效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【CSS】一个多重边框实现的相框效果</title> <style> .container { margin: 1em 0.5em 0 0.5em; } img.mat { box-sizing: border-box; width: 100%; height: auto; display: block; padding: 10%; background-color: #A67B5B; background-image: url(http://res.30ke.cn/u/1/201808/cl38zxrakp.jpg); background-repeat: no-repeat; background-size: cover; border: 6px double #483C32; box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0,0,0,0.8) inset; outline: 2px solid #333; outline-offset: 0px; } </style> </head> <body> <div class="container"> <img src="http://res.30ke.cn/u/1/201808/ye5izyhjt8.jpg" class="mat"> </div> </body> </html>