{"id":1382,"date":"2025-06-17T09:59:18","date_gmt":"2025-06-17T01:59:18","guid":{"rendered":"https:\/\/womeifei.cn\/?p=1382"},"modified":"2025-06-17T10:09:00","modified_gmt":"2025-06-17T02:09:00","slug":"css-%e9%bc%a0%e6%a0%87%e5%87%91%e8%bf%91%e8%be%b9%e6%a1%86%e5%8f%98%e4%ba%ae%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/womeifei.cn\/index.php\/2025\/06\/17\/css-%e9%bc%a0%e6%a0%87%e5%87%91%e8%bf%91%e8%be%b9%e6%a1%86%e5%8f%98%e4%ba%ae%e6%95%88%e6%9e%9c\/","title":{"rendered":"CSS—\u9f20\u6807\u51d1\u8fd1\u8fb9\u6846\u53d8\u4eae\u6548\u679c"},"content":{"rendered":"\n
\"\"<\/div><\/figure>\n\n\n\n

\u5728\u91cd\u5e86\u5927\u5b6627\u5c4a\u524d\u7aef\u4f6c\u7684\u4e2a\u4eba\u535a\u5ba2\u4e2d\u53d1\u73b0\u4e86 \u8fd9\u6837\u7684\u6548\u679c \u9f20\u6807\u51d1\u8fd1\u76d2\u5b50\u65f6 \u8fb9\u6846\u53d8\u4eae \u89c9\u5f97\u5f88\u6709\u610f\u601d \u4e8e\u662f\u601d\u8003\u5982\u4f55\u5b9e\u73b0?<\/p>\n\n\n\n

\u60f3\u4e0d\u51fa\u6765 \u5c31\u53bb\u627e\u4e86\u6559\u7a0b \u6ca1\u60f3\u5230\u771f\u6709 \u4e0d\u8fc7\u5c31\u4e00\u5bb6 \u4f46\u591f\u7528\u4e86<\/p>\n\n\n\n

\u601d\u8def\u5927\u4f53\u662f\u8fd9\u6837: \u4e09\u5c42\u76d2\u5b50 <\/p>\n\n\n\n

\u7b2c\u4e00\u5c42\u662f\u5bb9\u5668\u76d2\u5b50 \u8bbe\u7f6e\u767d\u8272\u900f\u660e\u8272 \u7b2c\u4e09\u5c42\u662finnner\u76d2\u5b50 \u8bbe\u4e3a\u7edd\u5bf9\u5b9a\u4f4d\u540e \u52a0\u4e0ainset : 2px \u76f8\u5f53\u4e8e\u8fb9\u6846\u6548\u679c\u5b9e\u9645\u4e0a\u662f\u7531\u4e24\u4e2a\u5927\u5c0f\u5dee\u4e0d\u591a\u7684\u76d2\u5b50\u663e\u73b0\u51fa\u6765\u7684 \u4e0d\u662f\u771f\u7684\u8fb9\u6846 \u6548\u679c\u5c31\u50cf\u8fd9\u4e2a\u6837<\/p>\n\n\n\n

\"\"<\/div><\/figure>\n\n\n\n

\u7b2c\u4e8c\u5c42\u76d2\u5b50\u662f\u7b2c\u4e00\u5c42\u76d2\u5b50\u7684\u4f2a\u5143\u7d20\u76d2\u5b50 \u8bbe\u7f6e\u80cc\u666f\u8272\u4e3a\u5f84\u5411\u6e10\u53d8 \u7531\u4f60\u559c\u6b22\u7684\u989c\u8272 —> \u900f\u660e\u8272 \u5c31\u50cf\u8fd9\u6837<\/p>\n\n\n\n

\"\"<\/div><\/figure>\n\n\n\n

\u73b0\u5728\u5c31\u8981\u76d1\u63a7\u9f20\u6807\u79fb\u52a8\u4e8b\u4ef6 \u8bbe\u7f6e\u7b2c\u4e8c\u5c42\u76d2\u5b50\u7684\u4f4d\u7f6e \u56e0\u4e3a\u4f1a\u6709\u591a\u4e2a\u76d2\u5b50 \u6240\u4ee5\u9700\u8981\u7684\u662f\u9f20\u6807\u548c\u6bcf\u4e2a\u76d2\u5b50\u7684\u76f8\u5bf9\u4f4d\u7f6e \u901a\u8fc7JS\u548cCSS\u53d8\u91cf\u5b9e\u73b0 ( \u8fd9\u4e00\u5757\u4e4b\u524d\u771f\u4e0d\u592a\u4e86\u89e3 \u5c24\u5176\u662fCSS\u53d8\u91cf)<\/p>\n\n\n\n

\u7ed9\u7b2c\u4e8c\u5c42\u76d2\u5b50\u8bbe\u7f6e CSS\u53d8\u91cf<\/p>\n\n\n\n

left: var(--x, -1000px);\ntop: var(--y, -1000px);<\/code><\/pre>\n\n\n\n
JS\u83b7\u53d6\u76f8\u5bf9\u4f4d\u7f6e \u4f7f\u7528item.style.setProperty (JavaScript \u63d0\u4f9b\u7684\u00a0\u52a8\u6001\u4fee\u6539 CSS \u6837\u5f0f<\/strong>\u00a0\u7684\u65b9\u6cd5) \u8bbe\u7f6e\u7b2c\u4e8c\u5c42\u76d2\u5b50\u7684\u76f8\u5bf9\u4f4d\u7f6e<\/p>\n\n\n\n
\u6700\u7ec8\u5b9e\u73b0\u6548\u679c<\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u4ee3\u7801\u5982\u4e0b<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta\n        name=\"viewport\"\n        content=\"width=device-width, initial-scale=1.0\"\n    >\n    <title>Document<\/title>\n    <style>\n        body,\n        html {\n            width: 100%;\n            height: 100%;\n            background-color: #000;\n\n        }\n\n        .wrapper {\n            margin: 10px;\n            width: 5000px;\n            height: 5000px;\n            display: grid;\n\n            grid-template-columns: repeat(3, 240px);\n\n            grid-gap: 10px;\n\n            grid-template-rows: 180px 180px;\n        }\n\n        \/*\u7b2c\u4e00\u5c42*\/\n        .item {\n            background-color: rgba(255, 255, 255, 0.3);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 24px;\n            border-radius: 8px;\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/*\u7b2c\u4e8c\u5c42*\/\n        .item::after {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            border-radius: inherit;\n            z-index: 2;\n            left: var(--x, -1000px);\n            top: var(--y, -1000px);\n            transform: translateX(-50%) translateY(-50%);\n            background: radial-gradient(closest-side circle at center,\n                    rgba(105, 184, 230, 0.6) 0%,\n                    rgba(255, 255, 255, 0) 100%);\n        }\n\n        \/*\u7b2c\u4e09\u5c42*\/\n        .inner {\n            position: absolute;\n            border-radius: inherit;\n            inset: 2px;\n            z-index: 3;\n            background-color: #141313;\n        }\n    <\/style>\n<\/head>\n\n<body>\n    <div class=\"wrapper\">\n        <div class=\"item\">\n            <div class=\"inner\"><\/div>\n        <\/div>\n        <div class=\"item\">\n            <div class=\"inner\"><\/div>\n        <\/div>\n        <div class=\"item\">\n            <div class=\"inner\"><\/div>\n        <\/div>\n        <div class=\"item\">\n            <div class=\"inner\"><\/div>\n        <\/div>\n        <div class=\"item\">\n            <div class=\"inner\"><\/div>\n        <\/div>\n        <div class=\"item\">\n            <div class=\"inner\"><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const wrapper = document.querySelector('.wrapper');\n        const items = document.querySelectorAll('.item');\n\n        wrapper.addEventListener('mousemove', function (e) {\n            for (const item of items) {\n                const rect = item.getBoundingClientRect();\n                const x = e.clientX - rect.left;\n                const y = e.clientY - rect.top;\n                item.style.setProperty('--x', `${x}px`);\n                item.style.setProperty('--y', `${y}px`);\n            }\n        });\n    <\/script>\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5728\u91cd\u5e86\u5927\u5b6627\u5c4a\u524d\u7aef\u4f6c\u7684\u4e2a\u4eba\u535a\u5ba2\u4e2d\u53d1\u73b0\u4e86 \u8fd9\u6837\u7684\u6548\u679c \u9f20\u6807\u51d1\u8fd1\u76d2\u5b50\u65f6 \u8fb9\u6846\u53d8\u4eae \u89c9\u5f97\u5f88\u6709\u610f\u601d \u4e8e\u662f\u601d\u8003\u5982\u4f55\u5b9e\u73b0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,1],"tags":[],"class_list":["post-1382","post","type-post","status-publish","format-standard","hentry","category-html5css3-","category-1"],"_links":{"self":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1382"}],"version-history":[{"count":2,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1382\/revisions"}],"predecessor-version":[{"id":1388,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1382\/revisions\/1388"}],"wp:attachment":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}