05-25-multiple-shadows-zero-blur.html 911 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Multiple box-shadows with a 0 blur radius</title>
  6. <style>
  7. body {
  8. padding: 5em;
  9. margin: 0;
  10. font-family: "Helvetica Neue", Arial, sans-serif;
  11. }
  12. .profile-photo {
  13. width: 160px;
  14. min-height: 200px;
  15. padding: .5em;
  16. background-color: #fff;
  17. border-radius: .5em;
  18. box-shadow: 0 0 0 10px #1c318d,
  19. 0 0 0 20px #3955c7,
  20. 0 0 0 30px #546dc7,
  21. 0 0 0 40px #7284d8;
  22. }
  23. .profile-photo img {
  24. display: block;
  25. max-width: 100%;
  26. height: auto;
  27. }
  28. .username {
  29. font-size: 20px;
  30. color: #666;
  31. margin: .35em 0 0;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="profile-photo">
  37. <img src="img/profile.jpg" alt="Charles the Cat">
  38. <h1 class="username">@CharlesTheCat</h1>
  39. </div>
  40. </body>
  41. </html>