<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体模糊，多重边框</title> <style> .div{ width: 500px; height: 500px; background: red; position: relative; top: 50%; /*transform: translateY(-50%);*/ transform: translateY(40px); /*字体模糊*/ color: transparent; text-shadow: #1900ff 0 0 3px; } /*利用重复指定box-shadow来达到多个边框的效果*/ .show{ box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); height: 200px; margin: 50px auto; width: 400px } </style> </head> <body> <div class="div">测试</div> <div class="show"></div> </body> </html>
