{"html":"

\n\n\n","css":".island-backdrop {\n filter: url(#handDrawnNoise);\n --ocean-deep: #194f71;\n --ocean: #216a94;\n --shallow: #3ec8cfb1;\n --foam: #ffffffa3;\n --sand: #f6e7b4;\n --dune: #ecd899;\n --land: #93c66b;\n --land-dark: #79ab4f;\n position: absolute;\n inset: 0;\n background-image:\n radial-gradient(\n ellipse 8vmin 10vmin at 20% 25%,\n var(--land-dark, #2a3d26) 0 70%,\n transparent 71%\n ),\n /* Land */\n radial-gradient(\n ellipse 16vmin 12vmin at 20% 25%,\n var(--land, #3d5c38) 0 70%,\n transparent 71%\n ),\n /* Sand */\n radial-gradient(\n ellipse 18vmin 14vmin at 20% 25%,\n var(--dune, #d2b48c) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 20vmin 16vmin at 20% 25%,\n var(--sand, #f2e2b2) 0 70%,\n transparent 71%\n ),\n /* Foam */\n radial-gradient(\n ellipse 22vmin 18vmin at 20% 25%,\n var(--foam, #ffffff88) 0 70%,\n transparent 71%\n ),\n /* Shallow water */\n radial-gradient(\n ellipse 24vmin 20vmin at 20% 25%,\n var(--shallowwater, #4ca3af) 0 70%,\n transparent 71%\n ),\n /* ==== */\n radial-gradient(\n ellipse 6vmin 11vmin at 75% 30%,\n var(--land-dark, #2a3d26) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 17vmin 13vmin at 75% 30%,\n var(--land, #3d5c38) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 19vmin 15vmin at 75% 30%,\n var(--dune, #d2b48c) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 21vmin 17vmin at 75% 30%,\n var(--sand, #f2e2b2) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 23vmin 19vmin at 75% 30%,\n var(--foam, #ffffff88) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 25vmin 21vmin at 75% 30%,\n var(--shallowwater, #4ca3af) 0 70%,\n transparent 71%\n ),\n /* ====== */\n radial-gradient(\n ellipse 6vmin 10vmin at 50% 75%,\n var(--land-dark, #2a3d26) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 15vmin 12vmin at 50% 75%,\n var(--land, #3d5c38) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 17vmin 14vmin at 50% 75%,\n var(--dune, #d2b48c) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 19vmin 16vmin at 50% 75%,\n var(--sand, #f2e2b2) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 21vmin 18vmin at 50% 75%,\n var(--foam, #ffffff88) 0 70%,\n transparent 71%\n ),\n radial-gradient(\n ellipse 23vmin 20vmin at 50% 75%,\n var(--shallowwater, #4ca3af) 0 70%,\n transparent 71%\n ),\n /* ======= */\n linear-gradient(180deg, var(--ocean) 0%, var(--ocean-deep) 80%);\n\n background-repeat: repeat;\n}\n\n.ocean-backdrop {\n --ocean-deep: #0b3a57;\n --ocean: #0f4e72;\n --shallow: #3ec7cf;\n --foam: #ffffffcc;\n --sand: #f6e7b4;\n --dune: #ecd899;\n --land: #93c66b;\n --land-dark: #79ab4f;\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, var(--ocean) 75%, var(--ocean-deep) 100%);\n background-repeat: no-repeat;\n}\n\n.content {\n position: relative;\n z-index: 1;\n min-height: 100%;\n display: grid;\n place-items: center;\n text-align: center;\n color: #ffffffee;\n font:\n 600 2.2rem/1.2 system-ui,\n -apple-system,\n Segoe UI,\n Roboto,\n Inter,\n sans-serif;\n text-shadow: 0 2px 8px #0008;\n padding: 2rem;\n}\n\n.card {\n backdrop-filter: blur(4px) saturate(1.1);\n background: #00000040;\n border: 1px solid #ffffff33;\n border-radius: 14px;\n padding: 1rem 1.25rem;\n font-size: 1.1rem;\n max-width: 640px;\n}\n\n.card code {\n background: #0000003a;\n padding: 0.15rem 0.35rem;\n border-radius: 0.35rem;\n}\n"}

strong-ladybug-70

👁 实时预览

📝 源代码