字型模糊，多重邊框
阿新 • • 發佈：2018-11-08
<!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>
