{"html":"\n \n Top
Left\n

\n\n \n\n \n Top
Right\n

\n\n
\n
\n\n \n Bottom
Left\n

\n\n \n\n \n Bottom
Right\n

\n","css":".container input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: inline-block;\n position: relative;\n cursor: pointer;\n font-size: 17px;\n width: 4em;\n height: 4em;\n user-select: none;\n border: 4px solid;\n border-image-slice: 1;\n background-color: #212121;\n}\n\nlabel {\n font-size: 12px;\n margin-top: -6px;\n font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n text-align: center;\n visibility: visible;\n}\n\n#topleft {\n border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);\n color: white\n}\n\n#topright {\n border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);\n color: white\n}\n\n#bottomleft {\n border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);\n color: white\n}\n\n#bottomright {\n border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);\n color: white\n}\n\n.selected {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n#topleft:hover {\n border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);\n background-image: linear-gradient(-45deg, #743ad5, #d53a9d);\n}\n\n#topright:hover {\n border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);\n background-image: linear-gradient(45deg, #743ad5, #d53a9d);\n}\n\n#bottomleft:hover {\n border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);\n background-image: linear-gradient(-135deg, #743ad5, #d53a9d);\n}\n\n#bottomright:hover {\n border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);\n background-image: linear-gradient(135deg, #743ad5, #d53a9d);\n}\n\n#topleft input[type=\"radio\"]:checked ~ .selected {\n box-shadow: 5px 5px 25px #743ad5,\n -5px -5px 25px #d53a9d;\n border-image-slice: 1;\n}\n\n#topright input[type=\"radio\"]:checked ~ .selected {\n box-shadow: -5px 5px 25px #743ad5,\n 5px -5px 25px #d53a9d;\n border-image-slice: 1;\n}\n\n#bottomleft input[type=\"radio\"]:checked ~ .selected {\n box-shadow: -5px 5px 25px #d53a9d,\n 5px -5px 25px #743ad5;\n border-image-slice: 1;\n}\n\n#bottomright input[type=\"radio\"]:checked ~ .selected {\n box-shadow: -5px -5px 25px #743ad5,\n 5px 5px 25px #d53a9d;\n border-image-slice: 1;\n}\n"}

silly-bulldog-25

👁 实时预览

📝 源代码