{"html":"

\n Home\n \n \n Profile\n \n \n Settings\n \n \n

\n","css":".radio-input {\n box-shadow: 0 20px 5px rgba(0, 0, 0, 0.3);\n border-radius: 20px;\n /* border: 1px solid white; */\n}\n\n.radio-input input {\n opacity: 0;\n position: absolute;\n}\n\n.radio-input label {\n padding: 15px 20px;\n cursor: pointer;\n background: linear-gradient(to bottom, white, grey);\n transition: 0.3s;\n font-weight: bold;\n color: #1a1a1a;\n}\n\n.radio-input label:first-child:has(input:checked) {\n box-shadow:\n 0 0 5px rgb(26, 123, 208) inset,\n 0 5px 15px rgba(0, 47, 255, 0.4),\n 0 0 15px rgba(1, 14, 89, 0.4) inset;\n background: linear-gradient(150deg, #ffffff, #a3c4f3);\n color: #1a7bd0;\n}\n\n.radio-input label:first-child:hover {\n box-shadow:\n 0 0 8px rgba(26, 123, 208, 0.8) inset,\n 0 6px 18px rgba(0, 47, 255, 0.5),\n 0 0 20px rgba(1, 14, 89, 0.5) inset;\n}\n\n.radio-input label:last-child:has(input:checked) {\n box-shadow:\n 0 0 5px #9b59b6 inset,\n 0 5px 15px rgba(155, 89, 182, 0.4),\n 0 0 15px rgba(105, 39, 105, 0.4) inset;\n background: linear-gradient(150deg, #f4ecf7, #d291bc);\n color: #8e44ad;\n}\n\n.radio-input label:last-child:hover {\n box-shadow:\n 0 0 8px rgba(155, 89, 182, 0.8) inset,\n 0 6px 18px rgba(142, 68, 173, 0.5),\n 0 0 20px rgba(105, 39, 105, 0.5) inset;\n}\n\n.radio-input label:has(input:checked) {\n box-shadow:\n 0 0 5px #2ecc71 inset,\n 0 5px 15px rgba(46, 204, 113, 0.4),\n 0 0 15px rgba(22, 128, 76, 0.4) inset;\n background: linear-gradient(150deg, #eafaf1, #7bdc8d);\n color: #1a934c;\n}\n\n.radio-input label:hover {\n box-shadow:\n 0 0 8px rgba(46, 204, 113, 0.8) inset,\n 0 6px 18px rgba(39, 174, 96, 0.5),\n 0 0 20px rgba(22, 128, 76, 0.5) inset;\n}\n\n.radio-input label:first-child {\n border-radius: 20px 0 0 20px;\n}\n\n.radio-input label:nth-child(3) {\n border-radius: 0 20px 20px 0;\n}\n"}

spicy-lion-6

👁 实时预览

📝 源代码