{ "version": "https://jsonfeed.org/version/1", "title": "CSS", "description": "Cascading Style Sheet\uff0c\u5c42\u53e0\u6837\u5f0f\u8868\uff0c\u7f51\u9875\u5916\u89c2\u8bbe\u8ba1\u7684\u6807\u51c6\u6280\u672f\u3002", "home_page_url": "go/css", "feed_url": "feed/css.json", "icon": "https://cdn.v2ex.com/navatar/e00d/a03b/139_large.png?m=1644497140", "favicon": "https://cdn.v2ex.com/navatar/e00d/a03b/139_normal.png?m=1644497140", "items": [ { "author": { "url": "member/Livid", "name": "Livid", "avatar": "https://cdn.v2ex.com/avatar/c4ca/4238/1_large.png?m=1776750814" }, "url": "t/1192530", "title": "Oak", "id": "t/1192530", "date_published": "2026-02-12T10:44:57+00:00", "content_html": "https://oat.ink/

\u4e00\u4e2a\u975e\u5e38\u8f7b\u91cf\u7ea7\u7684 UI \u5e93\u3002

6KB CSS + 2.2KB JS" }, { "author": { "url": "member/Livid", "name": "Livid", "avatar": "https://cdn.v2ex.com/avatar/c4ca/4238/1_large.png?m=1776750814" }, "url": "t/1180133", "title": "CSS Grid Lanes", "id": "t/1180133", "date_published": "2025-12-20T06:16:18+00:00", "content_html": "

https://webkit.org/blog/17660/introducing-css-grid-lanes/

$\"\"$

\n" }, { "author": { "url": "member/HMYang33", "name": "HMYang33", "avatar": "https://cdn.v2ex.com/avatar/c24b/8e90/675719_large.png?m=1770955236" }, "url": "t/1153682", "title": "\u5f53 Github \u7f51\u7ad9\u7684\u67d0\u4e9b css \u672a\u6b63\u5e38\u52a0\u8f7d\uff0c\u5c45\u7136\u6709\u4e00\u79cd\u522b\u6837\u7684\u7f8e\u611f", "id": "t/1153682", "date_published": "2025-08-20T06:03:56+00:00", "content_html": "https://imgur.com/a/KrTz0WA" }, { "author": { "url": "member/williamherry", "name": "williamherry", "avatar": "https://cdn.v2ex.com/avatar/f5aa/7691/36139_large.png?m=1739421841" }, "url": "t/1148785", "date_modified": "2025-07-30T07:46:03+00:00", "content_html": "

\u4e00\u76f4\u7528 Bootstrap \uff0c \u6700\u8fd1\u53d1\u73b0 Tailwind \u51fa\u955c\u7387\u6709\u70b9\u9ad8\uff0c \u73b0\u5728 Tailwind \u6210\u4e3b\u6d41\u4e86\u5417\uff1f\u6709\u5fc5\u8981\u5b66\u4e60 Tailwind \u5417\uff1f

\n", "date_published": "2025-07-30T07:45:04+00:00", "title": "2025 \u5e74\u4e86\uff0c\u524d\u7aef\u6837\u5f0f\u6846\u67b6\u5e94\u8be5\u9009 Bootstrap \u8fd8\u662f Tailwind\uff1f", "id": "t/1148785" }, { "author": { "url": "member/sugarkeek", "name": "sugarkeek", "avatar": "https://cdn.v2ex.com/avatar/dbe9/73b9/172054_large.png?m=1745726832" }, "url": "t/1125973", "title": "\u6280\u672f\u6587\u7ae0\u7ffb\u8bd1\uff1a CSS \u5b9e\u73b0\u6781\u7b80\u7684 LQIP", "id": "t/1125973", "date_published": "2025-04-16T11:55:21+00:00", "content_html": "\u53c8\u770b\u5230\u4e00\u7bc7\u611f\u5174\u8da3\u7684\u82f1\u6587\u6587\u7ae0\uff0c\u7b80\u5355\u7ffb\u8bd1\u4e86\u4e00\u4e0b\uff0c

[\u4ec5\u7528 CSS \u5b9e\u73b0\u6781\u7b80\u7684\u6a21\u7cca\u56fe\u7247\u5360\u4f4d\u7b26]( https://halo.chenkeyan.com/archives/fe-weekly-8-css-lqip)

\u5176\u5b9e\u7b80\u5355\u6765\u8bf4\u5c31\u662f\uff0c\u63d0\u53d6\u56fe\u7247\u7684\u51e0\u4e2a\u4e3b\u8981\u989c\u8272\uff0c\u7528\u6574\u6570\u7f16\u7801\uff0c\u901a\u8fc7 CSS \u7684\u8ba1\u7b97\u5c5e\u6027\u8ba1\u7b97\u6210\u80cc\u666f\u56fe\u7247\uff0c\u5b9e\u73b0\u6a21\u7cca\u56fe\u7247\u5360\u4f4d\u7b26\u3002\u518d\u7ec6\u8282\u4e00\u70b9\u5c31\u662f\u600e\u4e48\u601d\u8003\u7684\uff0c\u600e\u4e48\u89e3\u7801\u7684\uff0c\u600e\u4e48\u6e32\u67d3\u6210 LQIP \u7684\u7b49\u7b49\u3002

\u6548\u679c\u53ef\u4ee5\u770b\u770b\uff1a

\u82f1\u6587\u539f\u6587\u5728\u8fd9\uff1a https://leanrada.com/notes/css-only-lqip/

\u53ef\u4ee5\u770b\u770b\u4f5c\u8005\u7684 demo\uff1a

https://leanrada.com/notes/css-only-lqip/gallery/

\u8fd9\u662f\u6211\u590d\u73b0\u7684\uff1a

https://codepen.io/showmecode_ahh/pen/VYYwjZq" }, { "author": { "url": "member/chemms", "name": "chemms", "avatar": "https://cdn.v2ex.com/gravatar/6288bfbe061b012e656e67f1d21ea3fd?s=73&d=retro" }, "url": "t/1122874", "title": "unocss \u7684\u987a\u5e8f\u95ee\u9898\uff0c\u6c42\u5927\u4f6c\u89e3\u60d1", "id": "t/1122874", "date_published": "2025-04-02T07:43:27+00:00", "content_html": "

\u5927\u4f6c\u4eec\uff0cunocss \u8fd9\u79cd\u6ca1\u6709\u8bed\u4e49\u987a\u5e8f\u5417\uff0c\u6211\u5148\u5199\u7684 red \u7136\u540e\u524d\u540e\u63d2\u5165\u65b0\u6837\u5f0f\uff0c\u4f46\u662f\u5b9e\u9645\u662f red \u751f\u6548

<div className=\"size-50px bg-green bg-red bg-blue\"></div>\n

\u5c31\u662f\u60f3\u7ec4\u4ef6\u7684\u4f20\u5165 className \u7075\u6d3b\u4e9b\uff0c\u53ef\u4ee5\u76f4\u63a5\u6ce8\u5165

className={\n clsx(\n 'px-12px flex-center border-0 select-none focus:outline-none relative',\n 'bg-gradient-to-r from-[#006DE9] to-[#0077FF] ',\n 'disabled:bg-blue-300 disabled:cursor-not-allowed',\n 'flex-center',\n rounded ? 'rounded-100000px' : '',\n isPressed ? 'bg-blue-800' : '',\n fullWidth ? 'w-full' : 'w-auto',\n loading ? 'opacity-50' : 'opacity-1000',\n sizeCss[size],\n className,\n )\n}\n

\u6709\u8fd9\u4e9b\u76f8\u5173\u7684\u914d\u7f6e\u5417\uff0c\u627e\u4e86\u4e00\u5708\u4e86

\n" }, { "author": { "url": "member/17681880207", "name": "17681880207", "avatar": "https://cdn.v2ex.com/avatar/8880/375b/303637_large.png?m=1774597204" }, "url": "t/1112790", "date_modified": "2025-02-20T02:37:13+00:00", "content_html": "

\u6211\u6709\u4e2a\u7ec4\u4ef6\u7684 html \u5b9a\u4e49\u5982\u4e0b\uff1a

<!-- \u9ed8\u8ba4\u5361\u7247 -->\n<div class=\"card\">\n <div class=\"card__title\">\n \t<slot name=\"title\"/>\n </div>\n <div class=\"card__content\">\n <slot name=\"content\"/>\n </div>\n</div>\n\n<!-- \u8b66\u544a\u5361\u7247\u6837\u5f0f -->\n<div class=\"card card--warning\">\n <div class=\"card__title\">\n \t<slot name=\"title\"/>\n </div>\n <div class=\"card__content\">\n <slot name=\"content\"/>\n </div>\n</div>\n\n<!-- \u6210\u529f\u5361\u7247\u6837\u5f0f -->\n<div class=\"card card--successful\">\n <div class=\"card__title\">\n \t<slot name=\"title\"/>\n </div>\n <div class=\"card__content\">\n <slot name=\"content\"/>\n </div>\n</div>\n

\u5173\u4e8e SCSS \u6211\u7684\u60f3\u6cd5\u662f\uff1a

// \u8fd9\u91cc\u5b9a\u4e49\u4e86\u666e\u901a\u5361\u7247\u6837\u7684\u6837\u5f0f\n.card {\n &__title {\n color: gray;\n }\n \n &__content {\n color: lightgray;\n }\n \n // \u5b9a\u4e49\u8b66\u544a\u5361\u7247\u7684\u6837\u5f0f\n &--warning {\n &__title {\n color: yellow;\n }\n \n &__content {\n color: lightyello;\n }\n }\n \n // \u5b9a\u4e49\u6210\u529f\u5361\u7247\u7684\u6837\u5f0f\n &--successful {\n &__title {\n color: green;\n }\n \n &__content {\n color: lightgreen;\n }\n }\n}\n

\u4f46\u662f\u8b66\u544a\u5361\u7247\u548c\u6210\u529f\u5361\u7247\u7684 css \u4f1a\u88ab\u89e3\u6790\u4e3a\uff1a

.card--warning__title {}\n.card--warning__content {}\n\n.card--successful__title {}\n.card--successful__content {}\n

\u4e5f\u5c31\u662f\u6211\u5b9e\u9645\u4f7f\u7528\u7684\u65f6\u5019\u5982\u679c\u8981\u4f7f\u7528\u8b66\u544a\u5361\u7247\uff0c\u5b9e\u9645\u4e0a html \u5e94\u8be5\u5199\u6210\uff1a

<div class=\"card card--warning\">\n <div class=\"card--warning__title\"><!-- \u800c\u4e0d\u662f <div class=\"card__title\"> -->\n \t<slot name=\"title\"/>\n </div>\n <div class=\"card-warning__content\"><!-- \u800c\u4e0d\u662f <div class=\"card__content\"> -->\n <slot name=\"content\"/>\n </div>\n</div>\n

\u8bf7\u95ee\u5404\u4f4d\u8001\u54e5\uff0cSCSS \u5e94\u8be5\u600e\u4e48\u6765\u5b9a\u4e49\u6837\u5f0f\u554a\uff1f

\n", "date_published": "2025-02-19T18:05:11+00:00", "title": "\u8001\u54e5\u4eec\uff0c\u95ee\u4e00\u4e2a SCSS \u7684\u95ee\u9898", "id": "t/1112790" }, { "author": { "url": "member/Leon6868", "name": "Leon6868", "avatar": "https://cdn.v2ex.com/avatar/14ed/48e6/438369_large.png?m=1748955348" }, "url": "t/1110159", "title": "Chrome 133.0.6943.60 @media (pointer: fine) \u5931\u6548\uff1f", "id": "t/1110159", "date_published": "2025-02-09T15:07:27+00:00", "content_html": "

\u5982\u9898\uff0c\u6bd4\u5982 https://gemini.google.com/app gemini \u7684\u6eda\u52a8\u6761\u6837\u5f0f\u5728 @media (pointer: fine){} \u4e2d\u5b9a\u4e49\uff0c\u4f46\u662f\u73b0\u5728\u5df2\u7ecf\u5931\u6548\u4e86

\n" }, { "author": { "url": "member/Rust2015", "name": "Rust2015", "avatar": "https://cdn.v2ex.com/avatar/51fd/c72d/674984_large.png?m=1738501691" }, "url": "t/1104094", "title": "\u6709\u4ec0\u4e48\u53ef\u4ee5\u628a\u8bbe\u8ba1\u56fe\u7eb8\u4e00\u952e\u751f\u6210 CSS \u548c HTML \u7684\u5de5\u5177\uff1a", "id": "t/1104094", "date_published": "2025-01-10T03:09:55+00:00", "content_html": "

\u8bd5\u4e86\u597d\u51e0\u6b3e\uff0c\u5bfc\u51fa\u540e\u4ee3\u7801\u597d\u4e71\uff0c\u4e0d\u7406\u60f3

\n" }, { "author": { "url": "member/dre4m", "name": "dre4m", "avatar": "https://cdn.v2ex.com/gravatar/29753bb9e01f6d6e3c6228978096e7f1?s=73&d=retro" }, "url": "t/1099229", "date_modified": "2025-01-17T13:28:26+00:00", "content_html": "

\u56fe\u5728\u8fd9\u91cc\uff1a\nhttps://www.filestall.com/TOfADvH0XIPnL1s/preview

\u6700\u8fd1\u65e0\u8bba\u505a\u4e86\u4e2a\u5c0f\u7f51\u7ad9\uff0c\u540e\u6765\u53d1\u73b0\u81ea\u5df1 css \u90fd\u5fd8\u5149\u4e86\uff0c\u95ee\u9898\u5728\u8fd9\u91cc\uff1a

spajishi.com \u4e0a\u9762\u641c\u7d22\u6846\u4e0d\u9f50\uff0c\u8c03\u6574\u9f50\u4e86\uff0c\u5185\u9875\u7684\u641c\u7d22\u6846\u53c8\u4e0d\u9f50\u4e86\uff0c\u597d\u50cf\u662f\u9700\u8981\u52a0\u4e00\u4e2a\u65b0\u7684\u7c7b\u533a\u5206\u5f00\u624d\u884c\uff0c\u662f\u8fd9\u6837\u5417\uff1f \u771f\u5fd8\u4e86\uff0c\u73b0\u5728\u4e0d\u641e\u6280\u672f\u4e86\u3002

\n", "date_published": "2024-12-21T02:39:45+00:00", "title": "\u95ee\u4e2a\u7b80\u5355\u7684 CSS \u95ee\u9898", "id": "t/1099229" }, { "author": { "url": "member/kaiki", "name": "kaiki", "avatar": "https://cdn.v2ex.com/avatar/a68b/3734/478696_large.png?m=1707406444" }, "url": "t/1081669", "title": "\u4e3a\u4ec0\u4e48 CSS \u4f2a\u5143\u7d20\u6ca1\u6709\u505a\u652f\u6301\u5d4c\u5957\u4f2a\u5143\u7d20\u7684\u8bbe\u8ba1\u5462", "id": "t/1081669", "date_published": "2024-10-19T02:07:37+00:00", "content_html": "\u867d\u7136\u4f7f\u7528\u573a\u666f\u786e\u5b9e\u6bd4\u8f83\u5c11\u5427\uff0c\u4f46\u662f\u5199 css \u7684\u65f6\u5019\u603b\u4f1a\u51fa\u73b0\u4e24\u4e2a\u4f2a\u5143\u7d20\u8fd8\u662f\u4e0d\u591f\u753b\u51fa\u590d\u6742 ui \u7684\u60c5\u51b5\uff0c\u5982\u679c\u4f2a\u5143\u7d20\u4e5f\u80fd\u652f\u6301\u4f2a\u5143\u7d20\u4e0d\u77e5\u9053\u80fd\u73a9\u5f97\u591a\u82b1\u3002
\u5982\u679c\u652f\u6301\uff0c\u90a3\u8c01\u8fd8\u770b\u5f97\u660e\u767d\u4f2a\u5143\u7d20\u4ee3\u7801\u5230\u5e95\u5728\u5199\u5565\u554a\u3002" }, { "author": { "url": "member/jin7", "name": "jin7", "avatar": "https://cdn.v2ex.com/gravatar/907157f5c2e3acf2a45818cc0d32e213?s=73&d=retro" }, "url": "t/1071506", "title": "\u6ca1\u770b\u660e\u767d\u8fd9\u53e5\u8bdd\u4ec0\u4e48\u610f\u601d--BFC \u5e03\u5c40\u89c4\u5219: \u6bcf\u4e2a\u5143\u7d20\u7684 margin box \u7684\u5de6\u8fb9\uff0c \u4e0e\u5305\u542b\u5757 border box \u7684\u5de6\u8fb9\u76f8\u63a5\u89e6(\u5bf9\u4e8e\u4ece\u5de6\u5f80\u53f3\u7684\u683c\u5f0f\u5316\uff0c\u5426\u5219\u76f8\u53cd)\u3002\u5373\u4f7f\u5b58\u5728\u6d6e\u52a8\u4e5f\u662f\u5982\u6b64\u3002", "id": "t/1071506", "date_published": "2024-09-10T01:11:32+00:00", "content_html": "BFC \u5e03\u5c40\u89c4\u5219: \u6bcf\u4e2a\u5143\u7d20\u7684 margin box \u7684\u5de6\u8fb9\uff0c \u4e0e\u5305\u542b\u5757 border box \u7684\u5de6\u8fb9\u76f8\u63a5\u89e6(\u5bf9\u4e8e\u4ece\u5de6\u5f80\u53f3\u7684\u683c\u5f0f\u5316\uff0c\u5426\u5219\u76f8\u53cd)\u3002\u5373\u4f7f\u5b58\u5728\u6d6e\u52a8\u4e5f\u662f\u5982\u6b64\u3002

\u5927\u4f6c\u4eec \u6ca1\u770b\u660e\u767d\u8fd9\u53e5\u8bdd\u4ec0\u4e48\u610f\u601d." }, { "author": { "url": "member/abcbuzhiming", "name": "abcbuzhiming", "avatar": "https://cdn.v2ex.com/avatar/eced/0c34/112484_large.png?m=1673873219" }, "url": "t/1062082", "title": "\u9664\u4e86 Flex\uff0c\u8fd8\u6709\u4ec0\u4e48\u529e\u6cd5\u597d\u529e\u6cd5\u89e3\u51b3\"\u6700\u540e\u4e00\u4e2a\u76d2\u5b50\u585e\u6ee1\u5269\u4f59\u7a7a\u95f4\"\u8fd9\u4e2a\u95ee\u9898", "id": "t/1062082", "date_published": "2024-08-02T09:14:37+00:00", "content_html": "\u5728\u5f88\u591a\u540c\u6837\u662f\u4ee5\u6807\u8bb0\u8bed\u8a00\u753b UI \u7684\u7cfb\u7edf\u91cc\uff0c\u5982 WPF \uff0cavalonia \uff0cflutter \u5b83\u4eec\u662f\u76f4\u63a5\u63d0\u4f9b\u4e86\u4e00\u4e2a\u5bb9\u5668\uff0c\u53ea\u8981\u4f60\u628a\u7ec4\u4ef6\u4e22\u8fdb\u8fd9\u4e2a\u5bb9\u5668\uff0c\u90a3\u4e48\u6700\u540e\u4e00\u4e2a\u7ec4\u4ef6\u5fc5\u7136\u4f1a\u5360\u9886\u7236\u5143\u7d20\u7684\u6240\u6709\u5269\u4f59\u7a7a\u95f4\u3002

\u4f46\u662f\u5728 web \u7cfb\u7edf\uff0c\u8fd9\u4e2a\u95ee\u9898\u6709\u70b9\u590d\u6742\uff0cweb \u7cfb\u7edf\u91cc\uff0c\u7edd\u5927\u90e8\u5206\u522b\u4eba\u5f00\u53d1\u7684\u7ec4\u4ef6\uff0c\u6700\u540e\u53d8\u6210 html \u4ee3\u7801\u7684\u65f6\u5019\uff0c\u5b83\u5e76\u4e0d\u662f\u4e00\u4e2a\u6574\u4f53\uff0c\u800c\u662f\u5957\u4e86\u597d\u591a\u5c42 div \u7684\u4e00\u4e2a\u6563\u88c5\u7ed3\u6784\u3002\u4f60\u771f\u6b63\u5e0c\u671b\u8fbe\u5230\u4f60\u60f3\u8981\u7684\u6548\u679c\uff0c\u5f80\u5f80\u5f97\u628a\u8fd9\u4e2a\u7ec4\u4ef6\u9760\u8fd1\u5185\u5c42\u7684\u67d0\u4e2a div \uff0c\u7ed9\u5b83\u6491\u5927\uff0c\u624d\u80fd\u8ba9\u7ec4\u4ef6\u7684\u89c6\u89c9\u6548\u679c\u4e0a\u8fbe\u5230\u4e86\u5360\u636e\u6240\u6709\u5269\u4f59\u7a7a\u95f4\u7684\u76ee\u6807\u3002

\u800c\u4f7f\u7528 flex \u7684\u5f31\u70b9\u5c31\u5728\u4e8e\uff0c\u4f60\u5982\u679c\u60f3\u8981\u5b83\u8fbe\u5230\u76ee\u6807\uff0c\u90a3\u4e48\u5230\u8fbe\u8fd9\u4e2a\u201c\u6700\u7ec8 div\u201d\u7684\u8def\u5f84\u4e0a\u7684\u6240\u6709\u7236\u5143\u7d20\uff0c\u90fd\u5fc5\u987b\u662f flex \u3002\u7136\u800c\u5f88\u9057\u61be\u7684\u662f\uff0c\u5404\u5bb6\u7ec4\u4ef6\u5f00\u53d1\u8005\u7684\u60f3\u6cd5\u4e0d\u540c\uff0c\u800c\u4e14\u4ed6\u4eec\u663e\u7136\u4e0d\u4f1a\u5728\u7ec4\u4ef6\u7684\u5b9e\u73b0\u4e0a\u5b8c\u5168\u91c7\u7528 flex \u5e03\u5c40\u3002\u8fd9\u5c31\u5bfc\u81f4\u4f60\u60f3\u7528 flex \u5e03\u5c40\u8fbe\u5230\u76ee\u6807\u7684\u60f3\u6cd5\u96be\u4ee5\u5b9e\u73b0\uff0c\u5c31\u7b97\u4f60\u771f\u7684\u7528\u7b28\u529e\u6cd5\uff0c\u6328\u4e2a\u53bb\u7528 CSS \u628a\u8fd9\u4e2a\u7ec4\u4ef6\u751f\u6210\u7684 html \uff0c\u7ed9\u5b83\u6309\u4e2a\u67e5\u4e0b\u53bb\uff0c\u8def\u5f84\u4e0a\u7684\u6240\u6709 div \u90fd\u7ed9\u6539\u4e86 flex \uff0c\u4e5f\u672a\u5fc5\u4f1a\u8fbe\u5230\u6548\u679c\u2014\u2014\u6709\u4e9b\u4f5c\u8005\u4f1a\u5728\u7ec4\u4ef6\u7684\u5b9e\u73b0\u4e0a\u7528 float \u6216\u8005\u7edd\u5bf9\u5e03\u5c40\uff0c\u8ba9\u4f60\u5403\u762a\u3002\u3002\u3002

\u8fd9\u4e2a\u95ee\u9898\u975e\u5e38\u7684\u56f0\u6270\u6211\uff0c\u4f3c\u4e4e\u6682\u65f6\u6ca1\u6709\u66f4\u597d\u7684\u529e\u6cd5\uff0c\u7a76\u5176\u539f\u56e0\u5c31\u5728\u4e8e\u5176\u5b83 UI \u5e73\u53f0\u4e0a\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u771f\u7684\u88ab\u89c6\u4e3a\u4e00\u4e2a\u6574\u4f53\u3002\u800c\u5728 web \u5e73\u53f0\u4e0a\uff0c\u7edd\u5927\u90e8\u5206\u7ec4\u4ef6\u90fd\u4f1a\u53d8\u6210\u6563\u88c5\u7684 html" }, { "author": { "url": "member/17681880207", "name": "17681880207", "avatar": "https://cdn.v2ex.com/avatar/8880/375b/303637_large.png?m=1774597204" }, "url": "t/1061799", "date_modified": "2024-08-02T02:35:48+00:00", "content_html": "

\u6d89\u53ca\u6280\u672f\u6808

electron-vite / vue3

\u95ee\u9898\u63cf\u8ff0

\u524d\u7aef\u9879\u76ee A \u901a\u8fc7 iframe \u52a0\u8f7d\u9879\u76ee B \uff0c\u4f46\u662f\u524d\u7aef\u9879\u76ee B \u8981\u5141\u8bb8\u5185\u5d4c\u5728 electron \u4e2d\uff0c\u6240\u4ee5\u5728 title \u7ec4\u4ef6\u4e0a\u914d\u7f6e\u4e86 -webkit-app-region: drag; \u5c5e\u6027\uff0c\u5141\u8bb8\u7528\u6237\u76f4\u63a5\u901a\u8fc7\u6807\u9898\u680f\u8fdb\u884c\u7a97\u53e3\u62d6\u62fd\u3002\u7136\u540e\u5c31\u53d1\u73b0 A \u9879\u76ee\u4e2d\u7684 iframe \u65e0\u6cd5\u52a0\u8f7d B \u9879\u76ee\uff0c\u7ecf\u8fc7\u53cd\u590d\u6d4b\u8bd5\uff0c\u53d1\u73b0\u628a -webkit-app-region: drag; \u5c5e\u6027\u6ce8\u91ca\u5c31\u53ef\u4ee5\u6b63\u5e38\u7684\u52a0\u8f7d\u3002
\n\u65e0\u6cd5\u52a0\u8f7d\u7684\u8868\u73b0\u5f62\u5f0f\u4e3a\uff0c\u7070\u8272\uff0c\u5982\u56fe\uff1a\n $\"d048f570e8510b051af9574c4a63047\"$

\u76ee\u524d\u6211\u7684\u89e3\u51b3\u65b9\u6848

\u76ee\u524d\u6211\u7684\u89e3\u51b3\u65b9\u6848 B \u9879\u76ee\u4e2d\u7684\u62d6\u62fd\u4f7f\u7528\u901a\u8fc7 ipcRenderer.send \u65b9\u6cd5\u6765\u5b9e\u73b0\uff0c\u4e0d\u518d\u4f7f\u7528 -webkit-app-region: drag; \u5c5e\u6027\u3002

\u95ee\u9898

\u60f3\u77e5\u9053 -webkit-app-region: drag; \u4e3a\u4ec0\u4e48\u4f1a\u5bfc\u81f4 iframe \u52a0\u8f7d\u9875\u9762\u5931\u8d25\u7684\u539f\u56e0\uff0c\u4ee5\u53ca\u6709\u65e0\u5176\u4ed6\u66f4\u597d\u7684\u89e3\u51b3\u65b9\u6848\uff1f

\n", "date_published": "2024-08-01T09:27:14+00:00", "title": "css \u5c5e\u6027 -webkit-app-region: drag; \u5bfc\u81f4 iframe \u52a0\u8f7d\u9875\u9762\u5931\u8d25", "id": "t/1061799" }, { "author": { "url": "member/abcbuzhiming", "name": "abcbuzhiming", "avatar": "https://cdn.v2ex.com/avatar/eced/0c34/112484_large.png?m=1673873219" }, "url": "t/1061516", "title": "\u5982\u4f55\u6284\u4eba\u5bb6\u7684\u5e03\u5c40\uff1f", "id": "t/1061516", "date_published": "2024-07-31T08:19:45+00:00", "content_html": "\u4f5c\u4e3a\u4e00\u4e2a\u540e\u7aef\u7a0b\u5e8f\u5458\uff0c\u6211\u627f\u8ba4 CSS \u8fd9\u4e1c\u897f\u6211\u8fd9\u8f88\u5b50\u4e5f\u4e0d\u53ef\u80fd\u5f7b\u5e95\u641e\u660e\u767d\u4e86\u3002\u6240\u4ee5\u9000\u800c\u6c42\u5176\u6b21\u5427\uff0c\u6211\u5c31\u662f\u6309\u9700\u4f7f\u7528\u3002\u5f88\u591a\u65f6\u5019\uff0c\u6211\u5176\u5b9e\u5c31\u662f\u8981\u4e2a\u4e3b\u754c\u9762\u5e03\u5c40\u3002

\u6bd4\u5982\u8bf4\u5f88\u591a\u540e\u7aef\u90fd\u4f1a\u9047\u5230\u7684\u540e\u7aef\u7ba1\u7406\u7cfb\u7edf\uff0c\u5b83\u5176\u5b9e\u5c31\u662f\u9876\u90e8\u4e00\u4e2a header \uff0c\u4e0b\u9762\u5206\u5de6\u53f3\u4e24\u680f\uff0c\u5de6\u8fb9\u662f\u83dc\u5355\u680f\uff0c\u53f3\u8fb9\u662f\u5185\u5bb9\u533a\u57df\uff0c\u83dc\u5355\u680f\u6709\u4e2a\u6309\u94ae\uff0c\u70b9\u4e86\u4f1a\u6298\u53e0\u8d77\u6765\uff0c\u6709\u7684\u7cfb\u7edf\u662f\u5f7b\u5e95\u6298\u53e0\u83dc\u5355\u680f\uff0c\u6709\u7684\u6298\u53e0\u8d77\u6765\u4f46\u662f\u7559\u51fa\u56fe\u6807\u5bbd\u5ea6\u3002\u6bcf\u5bb6\u90fd\u6709\u81ea\u5df1\u7684\u7ec6\u8282\u4e0a\u7684\u4e00\u70b9\u533a\u522b\u3002\u73b0\u5728\u6211\u5c31\u662f\u60f3\u6284\u8fd9\u4e2a\u4e3b\u754c\u9762\u5e03\u5c40\uff0c\u6284\u51fa\u4e3b\u754c\u9762\u4e86\u540e\u5176\u5b83\u7684\u90e8\u5206\u5c31\u81ea\u5df1\u6162\u6162\u586b\u5145\u4e86\u3002\u4f46\u662f\uff0c\u8fd9\u4e2a\u4e3b\u754c\u9762\u5e03\u5c40\u8be5\u600e\u4e48\u6284\u5462\uff1f" }, { "author": { "url": "member/hblevins", "name": "hblevins", "avatar": "https://cdn.v2ex.com/gravatar/f0be7b21d3d98bc7b1057492aa264e46?s=73&d=retro" }, "url": "t/1054634", "title": "\u4e0b\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u5982\u4f55\u89e3\u91ca div \u7684\u9ad8\u5ea6\uff1f", "id": "t/1054634", "date_published": "2024-07-03T11:38:22+00:00", "content_html": "

\u6211\u7684\u7406\u89e3\u662f span \u7684 line-height \u8bbe\u7f6e\u4e3a 0 \uff0c\u90a3\u4e48\u5b83\u6240\u5728\u884c\u7684\u884c\u6846\u7684\u9ad8\u5ea6\u5c31\u53d8\u4e3a 0 \uff0c\u65e0\u6cd5\u6491\u8d77 div \u7684\u9ad8\u5ea6\uff0c\u56e0\u6b64 div \u7684\u9ad8\u5ea6\u56e0\u6b64\u4e3a 0 \u3002\u4f46\u5b9e\u9645\u4e0a,div \u7684\u9ad8\u5ea6\u4e3a 27, \u5e94\u8be5\u5982\u4f55\u89e3\u91ca div \u7684\u9ad8\u5ea6\u5462\uff1f

\u4e24\u4e2a\u73b0\u8c61\uff1a
\n1 \u3001\u5f53 div \u548c span \u7684 font-size \u8bbe\u7f6e\u4e3a\u76f8\u540c\u503c\u65f6\uff0cdiv \u7684\u9ad8\u5ea6\u4f1a\u4e3a 0 \uff08\u8fd9\u53c8\u662f\u4e3a\u4ec0\u4e48\u5462\uff1f\uff09
\n2 \u3001\u5982\u679c\u53bb\u6389\uff0c\u90a3\u4e48 div \u7684\u9ad8\u5ea6\u4e3a 0. \u8fd9\u53ef\u80fd\u662f\u56e0\u4e3a\u9875\u9762\u4e0a\u6ca1\u6709<!DOCTYPE html>\uff0c\u6d4f\u89c8\u5668\u5c06\u4f1a\u4ee5\u602a\u5f02\u6a21\u5f0f\u7684\u65b9\u5f0f\u53bb\u6e32\u67d3\u3002

\u4ee3\u7801\u5730\u5740\uff1a https://jsbin.com/ziyimaleqe/edit?html,output

$\"div-height.png\"$

\n" }, { "author": { "url": "member/hblevins", "name": "hblevins", "avatar": "https://cdn.v2ex.com/gravatar/f0be7b21d3d98bc7b1057492aa264e46?s=73&d=retro" }, "url": "t/1053054", "title": "\u7ed9 div \u548c span \u5143\u7d20\u8bbe\u7f6e line-height \u4e3a 0\uff0c\u4e3a\u4ec0\u4e48 div \u51e0\u4e4e\u5931\u53bb\u4e86\u9ad8\u5ea6\uff0c\u4f46 span \u7684\u9ad8\u5ea6\u6ca1\u6709\u53d7\u5230\u5f71\u54cd\uff1f", "id": "t/1053054", "date_published": "2024-06-27T05:09:31+00:00", "content_html": "

https://jsbin.com/hujodilogi/edit?html,output

$\"Snipaste_2024-06-27_13-08-20.png\"$

\n" }, { "author": { "url": "member/jiguang", "name": "jiguang", "avatar": "https://cdn.v2ex.com/avatar/1597/8ec9/30882_large.png?m=1730381494" }, "url": "t/1041367", "date_modified": "2024-05-16T09:38:10+00:00", "content_html": "\u521a\u63a8\u51fa\u65f6\u6ca1\u91cd\u89c6\uff0c\u6700\u8fd1\u5de5\u4f5c\u9700\u8981\u75af\u72c2\u8865\u8bfe Tailwind \u548c NextJs \u3001Remix \uff0c\u4e8e\u662f\u6574\u7406\u4e86\u76ee\u524d\u89c1\u5230\u53ef\u7528\u7684 Tailwind Components \u548c Templates \uff0c\u4e3b\u6d41\u6846\u67b6\u57fa\u672c\u90fd\u652f\u6301\uff0c\u5e0c\u671b\u6709\u7528\u3002

\u514d\u8d39\u7684 Tailwind CSS Component \u5408\u96c6\uff1a
1. shadcn/ui: https://ui.shadcn.com
2. daisyUI: https://daisyui.com/
3. Sailboat UI: https://sailboatui.com/
4. Preline UI: https://preline.co/
5. tailbits: https://www.tailbits.com/
6. Tailwind Toolbox: https://www.tailwindtoolbox.com/
7. Tailwind Awesome: https://www.tailwindawesome.com/
8. Meraki UI: https://merakiui.com/
9. Flowbite: https://flowbite.com/
10. LangUI: https://www.langui.dev/
11. cruip: https://cruip.com/
12. Tailspark: https://tailspark.co/
13. Tailsc: https://tailsc.com/
14. TailGrids: https://tailgrids.com/
15. React Suite: https://rsuitejs.com/
16. React Bootstrap: https://react-bootstrap.github.io/
17. Semantic UI React: https://react.semantic-ui.com/
18. Mantine: https://ui.mantine.dev/
19. NextUI: https://nextui.org/
20. TailBlocks: https://tailblocks.cc/
21. MAMBA UI: https://mambaui.com/
22. Shuffle for Tailwind: https://tailwind.build/
23. tailkits: https://tailkits.com/
24. tailkits: https://tailkits.com/
25. HyperUI: https://www.hyperui.dev/
26. Easy Frontend: https://easyfrontend.com/
27. HeadlessUI: https://headlessui.com/
28. tailwind UI: https://headlessui.com/
29. TW Elements: https://tw-elements.com/
30. UIVerse: https://uiverse.io/
31. Chakra UI: https://v2.chakra-ui.com/
32. Material Tailwind: https://www.material-tailwind.com/
33. Radix: https://www.radix-ui.com/
34. Use UI: https://useui.com/
35. Myna UI: https://mynaui.com/

\u652f\u6301\u76f4\u63a5\u590d\u5236\u7c98\u8d34\u7684\uff1a
1. shadcn/ui: https://ui.shadcn.com
2. LangUI: https://www.langui.dev/
3. TailBlocks: https://tailblocks.cc/
4. MAMBA UI: https://mambaui.com/
5. Shuffle for Tailwind: https://tailwind.build/
6. tailkits: https://tailkits.com/
7. tailkits: https://tailkits.com/
8. HyperUI: https://www.hyperui.dev/
9. Easy Frontend: https://easyfrontend.com/
10. Myna UI: https://mynaui.com/
11. CSS to Tailwind: https://transform.tools/css-to-tailwind
12. Tailwind Play: https://play.tailwindcss.com/
13. heroicons: https://heroicons.com/
14. Lucide: https://lucide.dev/

\u63d0\u4f9b\u6a21\u677f\u7684\uff1a
1. shadcn/ui: https://ui.shadcn.com
2. Preline UI: https://preline.co/
3. Tailwind Toolbox: https://www.tailwindtoolbox.com/
4. Tailwind Awesome: https://www.tailwindawesome.com/
5. cruip: https://cruip.com/
6. Tailspark: https://tailspark.co/
7. Tailsc: https://tailsc.com/
8. TailGrids: https://tailgrids.com/
9. MAMBA UI: https://mambaui.com/
10. Easy Frontend: https://easyfrontend.com/

\u63d0\u4f9b UI \u5957\u4ef6\u7684\uff1a
1. tailbits: https://www.tailbits.com/
2. Tailwind Toolbox: https://www.tailwindtoolbox.com/
3. Tailwind Awesome: https://www.tailwindawesome.com/
4. tailkits: https://tailkits.com/
5. tailkits: https://tailkits.com/
6. TW Elements: https://tw-elements.com/

\u5e26\u7f16\u8f91\u5668\u7684\uff1a
1. Flowbite: https://flowbite.com/
2. Shuffle for Tailwind: https://tailwind.build/
3. Easy Frontend: https://easyfrontend.com/", "date_published": "2024-05-16T08:12:03+00:00", "title": "\u53ef\u80fd\u662f\u6700\u5168\u7684\u514d\u8d39 Tailwind CSS Component \u5408\u96c6", "id": "t/1041367" }, { "author": { "url": "member/mangojiji", "name": "mangojiji", "avatar": "https://cdn.v2ex.com/avatar/a123/d26a/662199_large.png?m=1729157569" }, "url": "t/1040379", "date_modified": "2024-05-13T11:54:55+00:00", "content_html": "

\u4ee3\u7801\uff1a\nhttps://codepen.io/b1ghawk/pen/xxNbMwR

$\"Imgur\"$

\u60f3\u8981\u5b9e\u73b0\u8fd9\u6837\u7684\u6548\u679c\uff1a

$\"pic2\"$

\n", "date_published": "2024-05-13T11:48:48+00:00", "title": "\u8bf7\u95ee\u4e00\u4e2a DIV \u5185\u7684\u591a\u4e2a span \u5982\u4f55\u8fde\u5728\u4e00\u8d77\u663e\u793a\u5462\uff1f\u8bd5\u4e86\u597d\u591a\u529e\u6cd5\u90fd\u4e0d\u884c\u3002", "id": "t/1040379" }, { "author": { "url": "member/b1t", "name": "b1t", "avatar": "https://cdn.v2ex.com/avatar/ff92/1b83/551106_large.png?m=1764643628" }, "url": "t/1038997", "date_modified": "2024-05-09T03:52:27+00:00", "content_html": "

\u5728\u5b66\u524d\u7aef\uff0c\u770b\u4e86 React \u3001Nextjs

\u53c8\u8fb9\u770b Tailwind CSS \u7684\u6587\u6863\u8fb9\u5199\u70b9\u4e1c\u897f

\u4f46\u662f css \u662f\u6765\u56de\u8c03\u8bd5\uff0c\u7ecf\u5e38\u4e0d\u751f\u6548\uff0c\u6216\u8005\u4f4d\u7f6e\u5947\u5947\u602a\u602a

css \u6709\u4ec0\u4e48\u56fa\u5b9a\u5957\u8def\u53ef\u4ee5\u7528\u5417\uff1f
\n\u4f60\u4eec\u600e\u4e48\u5ea6\u8fc7\u7684\u8fd9\u4e2a\u9636\u6bb5\uff1f

\n", "date_published": "2024-05-09T02:26:25+00:00", "title": "css \u597d\u96be\uff0c\u4f60\u4eec\u600e\u4e48\u719f\u7ec3\u628a css \u7528\u8d77\u6765\u7684\uff1f", "id": "t/1038997" }, { "author": { "url": "member/hzdt", "name": "hzdt", "avatar": "https://cdn.v2ex.com/gravatar/6309548f9dab55dd7ae8e802cbe46fa6?s=73&d=retro" }, "url": "t/1035921", "title": "\u6709\u4ec0\u4e48\u5b9e\u6218\u5b66\u4e60 css \u7684\u6559\u7a0b?", "id": "t/1035921", "date_published": "2024-04-26T07:14:10+00:00", "content_html": "

\u5149\u770b\u77e5\u8bc6\u70b9\u8fd8\u662f\u6709\u70b9\u4e0d\u884c,\u6709\u6ca1\u6709\u8ddf\u7740\u6559\u7a0b\u7528 css \u5b9e\u73b0\u67d0\u4e2a\u6548\u679c,\u67d0\u4e2a\u7ec4\u4ef6,\u67d0\u4e2a\u7f51\u7ad9\u4e4b\u7c7b\u7684,\u6700\u597d\u662f\u6587\u6863\u7684.\u8c22\u8c22\u5404\u4f4d\u5927\u4f6c\u4eec\u4e86~

\n" }, { "author": { "url": "member/asuraa", "name": "asuraa", "avatar": "https://cdn.v2ex.com/gravatar/b737b444b9f6608b941fefd01fd854f1?s=73&d=retro" }, "url": "t/1030955", "title": "\u540e\u7aef\u7a0b\u5e8f\u5458\u5982\u4f55\u5b66\u4e60 css", "id": "t/1030955", "date_published": "2024-04-09T05:45:34+00:00", "content_html": "\u611f\u89c9\u8fd9\u73a9\u610f\u592a\u96be\u4e86\u3002
\u6ca1\u6709\u90a3\u79cd\u6307\u54ea\u6253\u54ea\u7684\u611f\u89c9\u3002
\u5c31\u662f\u4e00\u4e2a\u5f88\u77ed\u7684\u88ab\u5b50\uff0c\u76d6\u4e0a\u5934\u9732\u51fa\u4e86\u811a\uff0c\u76d6\u4e0a\u811a\u9732\u51fa\u4e86\u5934\u3002
\u90a3\u4e48\u540e\u7aef\u7a0b\u5e8f\u5458\u5982\u4f55\u5feb\u901f\u5165\u95e8 css \uff1f \u5feb\u901f\u5b66\u4e60\u5e03\u5c40" }, { "author": { "url": "member/wukongkong", "name": "wukongkong", "avatar": "https://cdn.v2ex.com/gravatar/7be693f225fdae985abcd80c04a028a4?s=73&d=retro" }, "url": "t/1029243", "title": "unocss \u5982\u4f55\u4fee\u6539\u9ed8\u8ba4 8 \u7684\u500d\u6570", "id": "t/1029243", "date_published": "2024-04-02T12:12:31+00:00", "content_html": "

unocss \u7528\u8d77\u6765\u8fd8\u662f\u633a\u65b9\u4fbf\u7684\uff0c\u4f46\u662f\u8fd9\u4e2a\u500d\u6570\u6709\u70b9\u5927\uff08 8 16 32 \uff09\uff0c\u5e0c\u671b\u53ef\u4ee5\u8c03\u6574\u6210 4 \u500d\uff08 4 8 12 16 \uff09\uff0c\u548c tailwindcss \u4e00\u6837\u3002\n\u627e\u4e86\u534a\u5929\uff0c\u6ca1\u627e\u5230\u5728\u54ea\u91cc\u4fee\u6539\uff0c\u6709\u6ca1\u6709\u4e00\u4e2a\u5730\u65b9\u4fee\u6539\uff0c\u6240\u6709\u7684\u5730\u65b9\uff08\u95f4\u8ddd\uff0c\u5b57\u4f53\u7b49\uff09\uff0c\u90fd\u751f\u6548\u7684\u529e\u6cd5\u3002

\n" }, { "author": { "url": "member/meeop", "name": "meeop", "avatar": "https://cdn.v2ex.com/avatar/8f89/5180/450566_large.png?m=1774239808" }, "url": "t/1013832", "date_modified": "2024-02-03T11:47:22+00:00", "content_html": "

\u5bb9\u5668\u4e2d\u7684\u76d2\u5b50\u6309\u7167\u91cd\u529b\u65b9\u5411\u5806\u53e0,\u5982\u679c\u6321\u4f4f\u4e86\u5c31\u4f1a\u6709\u4e00\u90e8\u5206\u60ac\u7a7a,\u5982\u679c\u6709\u7a7a\u5c31\u80fd\u6389\u8fdb\u53bb,\u5c31\u50cf\u4fc4\u7f57\u65af\u65b9\u5757\u4e00\u6837

\u7814\u7a76\u4e86\u4e0b\u51e0\u79cd\u5e03\u5c40\u65b9\u5f0f\u90fd\u4e0d\u652f\u6301,\u53ea\u80fd\u901a\u8fc7 js \u8ba1\u7b97\u7684\u65b9\u5f0f\u8bbe\u7f6e\u6bcf\u4e2a\u5143\u7d20\u4f4d\u7f6e\u6765\u5b9e\u73b0\n\u4f46\u662f js \u7684\u95ee\u9898\u65f6\u88ab\u5e03\u5c40\u5143\u7d20\u5c3a\u5bf8\u53d8\u5316\u65f6\u8981\u91cd\u7b97,\u4e0d\u80fd\u81ea\u52a8\u91cd\u65b0\u8c03\u6574,\u5e03\u5c40\u8c03\u6574\u5b8c\u6210\u524d\u5c31\u4f1a\u6709\u6bb5\u7ad9\u65f6\u95f4\u5185\u5bb9\u4f38\u51fa\u5bb9\u5668

\n", "date_published": "2024-02-03T02:42:37+00:00", "title": "css \u6709\u6ca1\u6709\u529e\u6cd5\u5b9e\u73b0\u7c7b\u4f3c\u4fc4\u7f57\u65af\u65b9\u5757\u7684\u5e03\u5c40\u6548\u679c?", "id": "t/1013832" }, { "author": { "url": "member/Rebron1900", "name": "Rebron1900", "avatar": "https://cdn.v2ex.com/gravatar/cc38267b10cc25dfc62209f8ca34589e?s=73&d=retro" }, "url": "t/1005119", "date_modified": "2024-01-02T09:04:50+00:00", "content_html": "\u6700\u8fd1\u5728\u73a9 11ty \uff0c\u60f3\u628a bigfa \u8001\u5e08\u7684 https://bigfa.github.io/ \u8fd9\u4e2a\u4e3b\u9898\u79fb\u690d\u8fc7\u53bb\uff0c\u7136\u540e\u60f3\u7528 Tailwindcss \u91cd\u5199 \u3002", "date_published": "2024-01-02T03:33:11+00:00", "title": "\u60f3\u628a\u4e00\u4e2a\u7f51\u7ad9\u7684\u6240\u6709\u6837\u5f0f\u8f6c\u6210 TailWindCss\uff0c\u8bf7\u6559\u5404\u4f4d\u5927\u4f6c\u8981\u548b\u5f04\u5440\uff1f", "id": "t/1005119" }, { "author": { "url": "member/isajdhs", "name": "isajdhs", "avatar": "https://cdn.v2ex.com/gravatar/5bc88da7c02e631497f06a68880a21a6?s=73&d=retro" }, "url": "t/998967", "title": "\u8fd9\u4e2a\u7f51\u7ad9\u80cc\u666f\u6e10\u53d8\u6548\u679c\u600e\u4e48\u5b9e\u73b0\u7684\uff1f", "id": "t/998967", "date_published": "2023-12-09T09:24:11+00:00", "content_html": "

\u5730\u5740\uff1a https://imagine.meta.com/

\n" }, { "author": { "url": "member/mfsw", "name": "mfsw", "avatar": "https://cdn.v2ex.com/gravatar/68e3b6f0b2a879ac73343505290598e5?s=73&d=retro" }, "url": "t/989137", "title": "\u8bf7\u6559\u4e0b\u5a92\u4f53\u67e5\u8be2\u7684\u95ee\u9898.", "id": "t/989137", "date_published": "2023-11-06T07:31:38+00:00", "content_html": "

\u6211\u7684\u811a\u672c\u91cc\u9762\u6709\u4e00\u6761\u9ed8\u8ba4\u7684 css\n.textanniu {\nfont-size: 50px;\n}

\u6211\u60f3\u7528\u5a92\u4f53\u67e5\u8be2,\u9488\u5bf9\u5c4f\u5e55\u5bbd\u5ea6\u5c0f\u4e8e 1280px \u7684\u60c5\u51b5,\u7f29\u5c0f\u4e00\u4e0b\u5b57\u4f53,\u6211\u628a css \u5199\u6210\u4e86\u4e0b\u9762\u7684\u4e24\u79cd\u683c\u5f0f,\u4f46\u662f\u90fd\u4e0d\u7ba1\u7528.

@media screen and (max-width: 1280px) {\n.textanniu {\nfont-size: 30px;\n}\n}

@media (max-width: 1280px) {\n.textanniu {\nfont-size: 30px;\n}\n}\n\u8bf7\u6559\u8bf8\u4f4d\u8001\u5927\u8fd9\u662f\u548b\u56de\u4e8b?\n\u6211\u7684 meta \u662f\u8fd9\u6837\u7684:

\n" }, { "author": { "url": "member/mfsw", "name": "mfsw", "avatar": "https://cdn.v2ex.com/gravatar/68e3b6f0b2a879ac73343505290598e5?s=73&d=retro" }, "url": "t/986548", "title": "\u6709\u5927\u4f6c\u63a5\u5355\u5417?\u5e2e\u5fd9\u4f18\u5316\u4e0b\u624b\u673a\u7aef\u7684 css,200rmb", "id": "t/986548", "date_published": "2023-10-29T18:54:16+00:00", "content_html": "

\u5982\u9898,\u5c31\u4e00\u4e2a\u7f51\u9875.\u5e2e\u6211\u505a\u597d\u9488\u5bf9\u4e0d\u540c\u5c4f\u5e55\u7684\u4f18\u5316\u5373\u53ef.\nvx: MTU2Njg5MTk3OTY=

\n" }, { "author": { "url": "member/NoraProgrmming", "name": "NoraProgrmming", "avatar": "https://cdn.v2ex.com/avatar/64a6/afac/592807_large.png?m=1699166490" }, "url": "t/985598", "date_modified": "2023-10-26T03:35:36+00:00", "content_html": "https://www.ptt.cc/bbs/index.html
\u539f\u7f51\u5740\u5728\u8fd9\u91cc

\u5012\u4e5f\u4e0d\u662f\u591a\u7231\u770b\u8fd9\u8bba\u575b\uff0c\u53ea\u662f\u6700\u8fd1\u521a\u5f00\u59cb\u5b66\u4e60\u4ee3\u7801\u60f3\u62ff\u5b83\u7ec3\u4e60\u4e00\u4e0b\uff0c\u4e4b\u524d\u4f7f\u7528 CSS \u66f4\u6539\u522b\u7684\u7f51\u9875\u90fd\u6210\u529f\u4e86\uff0c\u4f46\u662f PTT \u7684\u9634\u95f4\u754c\u9762\u600e\u4e48\u90fd\u6539\u4e0d\u4e86\u3002

\u4ee3\u7801\u4e5f\u6ca1\u6709\u62a5\u9519\uff0c\u4f46\u662f\u4e3a\u4ec0\u4e48\u6539\u4e0d\u4e86\u8fd9\u4e2a\u7f51\u9875\u5462\uff1f\u6c42\u5404\u4f4d\u5927\u795e\u6307\u5bfc

body {
background-color: #f5f5f5;
color: #333333;
font-family: \"PingFang SC\", \"Microsoft YaHei\";
font-size: 18px;
line-height: 1.6;
letter-spacing: 1px;
word-spacing: 4px;
}

a {
color: #0066cc;
}

img {
max-width: 100%;
height: auto;
}", "date_published": "2023-10-26T03:34:06+00:00", "title": "\u5c1d\u8bd5\u4f7f\u7528 CSS \u4f18\u5316\u53f0\u6e7e PTT \u8bba\u575b\u7f51\u9875\u7684\u9605\u8bfb\u6548\u679c\uff0c\u4f46\u5931\u8d25\u4e86", "id": "t/985598" }, { "author": { "url": "member/overdev", "name": "overdev", "avatar": "https://cdn.v2ex.com/avatar/fe36/0311/629026_large.png?m=1684133724" }, "url": "t/979436", "date_modified": "2023-10-08T00:28:52+00:00", "content_html": "

\u5b9e\u9645\u4e0a\u6211\u8981\u901a\u8fc7\u4f7f\u7528\u5bcc\u6587\u672c\u7f16\u8f91\u5668\u6765\u5b9e\u73b0\u4e0d\u540c\u98ce\u683c\u7684\u6587\u672c\uff0c\u4f46\u662f\u6211\u53d1\u73b0\u5e76\u6ca1\u6709\u4e00\u4e2a\u5bcc\u6587\u672c\u7f16\u8f91\u5668\u53ef\u4ee5\u8bbe\u7f6e\u6587\u672c\u63cf\u8fb9\uff0c\u4e8e\u662f\u6211\u60f3\u7f16\u5199\u4e00\u4e2a\u5173\u4e8e\u6587\u5b57\u63cf\u8fb9\u7684\u63d2\u4ef6.\u4f46\u662f\u6211\u4e0d\u77e5\u9053\u5982\u4f55\u901a\u8fc7 css \u6765\u8bbe\u7f6e\u6587\u672c\u63cf\u8fb9\u6765\u5f97\u5230\u8fd9\u6837\u7684\u6548\u679c $\"\"$

<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport Konva from 'konva';\nconst kOnvaInit= () => {\n const stage = new Konva.Stage({\n container: 'target',\n width: 400,\n height: 400\n })\n var layer = new Konva.Layer();\n\n var simpleText = new Konva.Text({\n x: 0,\n y: stage.width() / 2,\n text: 'Simple Text',\n fontSize: 50,\n fontFamily: 'Calibri',\n fill: 'green',\n stroke: 'white',\n strokeWidth: 10,\n lineJoin: 'round',\n fillAfterStrokeEnabled: true\n });\n layer.add(simpleText);\n\n stage.add(layer);\n}\n\nonMounted(konvaInit)\n</script>\n\n<template>\n <div class=\"test\">\n test text\n </div>\n <div class=\"test2\">\n test text\n </div>\n <div id=\"target\" class=\"text3\"></div>\n</template>\n\n<style scoped>\n.test {\n font-size: 80px;\n color: black;\n text-shadow: -10px -10px 10px blue,\n 10px -10px 10px blue,\n -10px 10px 10px blue,\n 10px 10px 10px blue;\n}\n\n.test2 {\n font-size: 80px;\n color: black;\n -webkit-text-stroke: 10px blue;\n}\n\n.text3 {\n width: 400px;\n height: 400px;\n background-color: black;\n}\n</style>\n\n

\n", "date_published": "2023-10-07T03:38:31+00:00", "title": "\u5982\u4f55\u4f7f\u7528 css \u6765\u8bbe\u7f6e\u6587\u5b57\u63cf\u8fb9\u4ebf\u4ee5\u8fbe\u5230 canvas \u4e2d\u8bbe\u7f6e\u6587\u5b57\u5916\u63cf\u8fb9\u7684\u6548\u679c\uff1f", "id": "t/979436" }, { "author": { "url": "member/wdssmq", "name": "wdssmq", "avatar": "https://cdn.v2ex.com/avatar/6632/34db/85366_large.png?m=1638374341" }, "url": "t/978261", "title": "\u884c\u5185\u5143\u7d20\u7684 padding \u8868\u73b0\u95ee\u9898", "id": "t/978261", "date_published": "2023-09-30T03:56:24+00:00", "content_html": "

\u4e3a\u4ec0\u4e48\u8fd9\u4e2a span \u7684\u4e0a\u4e00\u884c\u88ab\u906e\u6321\uff0c\u800c\u4e0b\u4e00\u884c\u6ca1\u6709\uff1f [ css \u5427] _\u767e\u5ea6\u8d34\u5427\nhttps://tieba.baidu.com/p/8625827524

\u8d34\u5427\u770b\u5230\u7684\uff0c\u4e0b\u8fb9\u662f\u6211\u7684\u56de\u590d\uff1a

\u5b9e\u9645\u8868\u73b0\u4e0a\u50cf\u662f\u7b2c n + 1 \u884c\u6bd4\u7b2c n \u884c\u6709\u66f4\u9ad8\u7684 z-index \u503c\uff0c\u7136\u800c\u4e0d\u6539\u5b9a\u4f4d\u65f6\u5355\u72ec\u6307\u5b9a z-index \u53c8\u662f\u65e0\u6548\u7684\uff0c\uff0cAI \u4e5f\u6ca1\u7ed9\u51fa\u5bf9\u9898\u7684\u89e3\u91ca\u3002\u3002

p \u4e2d\u6709\u4e00\u4e2a span \uff0c\u4e3a span \u8bbe\u7f6e padding \u548c \u80cc\u666f\u8272\uff0cspan \u663e\u793a\u5728\u7b2c\u4e8c\u884c\uff0c\u4e3a\u4ec0\u4e48\u7b2c\u4e00\u884c\u4f1a\u88ab span \u906e\u6321\u800c\u7b2c\u4e09\u884c\u4e0d\u4f1a\uff1f

\n" }, { "author": { "url": "member/daiwenzh5", "name": "daiwenzh5", "avatar": "https://cdn.v2ex.com/avatar/622b/f22c/306312_large.png?m=1722995591" }, "url": "t/965608", "title": "\u5173\u4e8e\u4f7f\u7528 flex \u5b9e\u73b0\u6570\u5b57\u952e\u76d8\u7684\u95ee\u9898\u8ba8\u8bba\uff1a\u5982\u4f55\u8ba1\u7b97\uff1f", "id": "t/965608", "date_published": "2023-08-15T14:17:50+00:00", "content_html": "\u5982\u9898\uff0c\u4e0d\u8003\u8651 grid \u5e03\u5c40\uff0c\u5b9e\u73b0\u4e00\u4e2a\u6570\u5b57\u952e\u76d8\u3002
\u5e03\u5c40\u7c7b\u578b\u4e8e
```text
1 2 3 \u5220\u9664
4 5 6 \u786e\u5b9a
7 8 9 \u786e\u5b9a
. 0 \u6e05\u96f6 \u786e\u5b9a
```
\u5176\u4e2d\u201c\u786e\u5b9a\u201d\u952e\u7eb5\u5411\u5408\u5e76\uff0c\u8981\u6c42\u81ea\u9002\u5e94\u3002
\u6211\u81ea\u5df1\u8ba1\u7b97\u4e86\u4e00\u4e0b\u6bcf\u4e2a\u6309\u952e\u7684\u5bbd\u5ea6\uff0c\u4f46\u662f\u4e0d\u5bf9\uff0c\u8c03\u6574\u4e86\u4e00\u4e0b\uff0c\u5982\uff1a
\u53c2\u8003\uff1a https://codepen.io/daiwenzh5/pen/JjegqWK

\u73b0\u5728\u7684\u95ee\u9898\u662f\uff0c\u600e\u4e48\u8ba1\u7b97\uff0c\u6216\u8005\u8ba1\u7b97\u516c\u5f0f\u662f\u4ec0\u4e48\uff1f\u6211\u662f\u8c03\u8bd5\u51fa\u6765\u7684\uff0c\u867d\u7136\u4e5f\u4e0d\u590d\u6742\uff0c\u82b1\u4e0d\u4e86\u591a\u5c11\u65f6\u95f4\uff0c\u4f46\u4e0d\u8be5\u8fd9\u6837\u7684\u3002" }, { "author": { "url": "member/atfeel", "name": "atfeel", "avatar": "https://cdn.v2ex.com/gravatar/05e880c3ebdb8f94dcc25fa1ead531c4?s=73&d=retro" }, "url": "t/948766", "title": "\u8c01\u77e5\u9053\u5982\u4f55\u4f7f\u7528 css\uff0c\u5b9e\u73b0\u8fd9\u6837\u7684\u4e0b\u5706\u5f27\u6548\u679c\uff1f", "id": "t/948766", "date_published": "2023-06-14T11:49:29+00:00", "content_html": "

$\"\"$ \n\u5927\u5bb6\u597d\uff0c\u5982\u56fe\u8fd9\u6837\u7684\u4e0b\u5706\u5f27\u6548\u679c\u662f\u600e\u4e48\u505a\u51fa\u6765\u7684\u5462\uff1f CSS \u8fd8\u662f\u56fe\u7247\u5462\uff1f

\n" }, { "author": { "url": "member/LandCruiser", "name": "LandCruiser", "avatar": "https://cdn.v2ex.com/gravatar/c2b01e216c511f784611f5cd4525cd1e?s=73&d=retro" }, "url": "t/944583", "title": "\u8bf7\u6559\u4e00\u4e2a\u548c border \u6709\u5173\u7684 CSS \u6837\u5f0f\u7684\u95ee\u9898", "id": "t/944583", "date_published": "2023-05-31T08:36:38+00:00", "content_html": "

123456789 \u7b49\u7b49\u4e00\u4e9b\u6570\u5b57\u6a2a\u5411\u6392\u5217\uff0c\u6bcf\u4e2a\u6570\u5b57\u5728\u4e00\u4e2a div \u4e2d\uff0c\u4f1a\u968f\u673a\uff08\u4e0d\u786e\u5b9a\u6570\u91cf\uff0c\u4e5f\u4e0d\u786e\u5b9a\u662f\u54ea\u4e2a\u6570\u5b57\uff09\u8d4b\u4e88\u67d0\u4e2a div \u4e00\u4e2a\u56db\u9762\u7684\u8fb9\u6846\uff0c\u5982\u4f55\u89e3\u51b3\u8bf8\u5982\uff0c1 \u548c 2 \u4e24\u4e2a div \u90fd\u6709\u8fb9\u6846\u65f6\u7684\u8fb9\u6846\u53e0\u52a0\u53d8\u7c97\u95ee\u9898\u5462\uff1f\u5199\u4e00\u4e2a\u65b9\u6cd5\u4e13\u95e8\u8ba1\u7b97\u54ea\u4e2a border \u6709\u54ea\u4e2a border \u6ca1\u6709\u4e5f\u592a\u590d\u6742\u4e86\u3002\u6216\u8005\u6539\u53d8\u5b9e\u73b0\u65b9\u5f0f\uff1f\u4e0d\u4f7f\u7528 div \u6765\u5305\u88f9\u6570\u5b57\uff1f\u6709\u6ca1\u6709\u7b80\u5355\u4e00\u4e9b\u7684\u529e\u6cd5\u5462

\n" }, { "author": { "url": "member/he2020", "name": "he2020", "avatar": "https://cdn.v2ex.com/avatar/4398/e65d/504539_large.png?m=1660734656" }, "url": "t/939641", "title": "\u5982\u4f55\u89e3\u91ca vertical-align \u7684\u8fd9\u4e2a\u73b0\u8c61\uff1f", "id": "t/939641", "date_published": "2023-05-12T15:01:06+00:00", "content_html": "

\u8fd0\u884c\u5730\u5740\uff1a https://jsbin.com/mipexucegi/edit?html,css,output\n

$\"vertical-align.jpg\"$

\n" }, { "author": { "url": "member/linuxsteam", "name": "linuxsteam", "avatar": "https://cdn.v2ex.com/avatar/7da0/eda5/257481_large.png?m=1639019209" }, "url": "t/927614", "title": "\u6ca1\u6709\u8131\u79bb\u6587\u6863\u6d41\u4e3a\u4ec0\u4e48\u5b50\u5143\u7d20[\u5916\u8fb9\u8ddd]\u8fd8\u6491\u4e0d\u8d77\u6765\u7236\u5143\u7d20", "id": "t/927614", "date_published": "2023-03-27T09:55:16+00:00", "content_html": "

\u5982\u9898\uff0c\u5c0f\u5f1f\u521a\u5b66\u524d\u7aef CSS\n\u95ee\u9898\u5982\u56fe\n $\"20230327_174749_w7r1xLQGxB.png\"$ \n\u7f51\u7ad9 https://wfion.com

\u6211\u5f00\u59cb\u6392\u67e5\u95ee\u9898\u5f97\u65f6\u5019\uff0c\u53ea\u6392\u67e5\u4e86 body \u5f97 css \u3002\u8bf7\u6559\u524d\u7aef\u540c\u4e8b\u4e86\uff0c\u4ed6\u53ea\u77e5\u9053\u6211\u56fe\u4e2d\u5143\u7d20\u5f71\u54cd\u4e86 \u8d85\u51fa\u4e86 body\n\u4f46\u662f\u4ed6\u4e0d\u77e5\u9053\u4ec0\u4e48\u539f\u56e0

\n" }, { "author": { "url": "member/wuyuchenshr", "name": "wuyuchenshr", "avatar": "https://cdn.v2ex.com/gravatar/b2366dbb7d76bdfe9d4c62f83c1af777?s=73&d=retro" }, "url": "t/921881", "title": "CSS \u9009\u62e9\u5668\u5982\u4f55\u7b5b\u9009\u540c\u7ea7\u7684\u7b2c\u4e00\u4e2a\u8282\u70b9\u3002[ Python ]", "id": "t/921881", "date_published": "2023-03-07T05:37:19+00:00", "content_html": "

\u7f51\u9875\u7ed3\u6784\u5982\u4e0b

\n\u6211\u662f\u6807\u9898 \n $\"\"$ \n\u94fe\u63a5 2\n\u94fe\u63a5 3\n

\u5176\u4e2d img class=\"pro_free \u662f\u56fa\u5b9a\u7684\uff0c\u6211\u7684\u9700\u6c42\u662f\u7b5b\u9009\u51fa\u94fe\u63a5 1\n\u4e5f\u5c31\u662f\u7b5b\u9009\u51fa embedded \u8282\u70b9\u4e0b\u9762\u7684\uff0cimg \u5143\u7d20\u4e0a\u9762\u7684\u7b2c\u4e00\u4e2a a \u5143\u7d20

\u636e\u6211\u67e5\u8d44\u6599\uff0ccss \u9009\u62e9\u5668\u4e0d\u652f\u6301\u8fd9\u79cd\u7b5b\u9009\uff0c\u5982\u679c\u7528 python \uff0c\u8bf7\u95ee\u5e94\u8be5\u600e\u4e48\u5199\u5462

\n" }, { "author": { "url": "member/taisenjay245", "name": "taisenjay245", "avatar": "https://cdn.v2ex.com/gravatar/ad84cc956946917d7c354cd6b273ea50?s=73&d=retro" }, "url": "t/909949", "title": "\u524d\u7aef\u521d\u5b66\u8005\u6c42\u89e3\uff01\u5728 html \u6587\u4ef6\u4e2d\u5148\u7ed9\u4e00\u4e2a\u6807\u7b7e\u8d77\u4e00\u4e2a\u7c7b\u540d\u540e\uff0c\u600e\u6837\u5b9e\u73b0\u5728 css \u6587\u4ef6\u4e2d\u8f93\u5165\".\"\u81ea\u52a8\u63d0\u793a\u8865\u5168\u7c7b\u540d\u5462\uff1f", "id": "t/909949", "date_published": "2023-01-19T12:28:30+00:00", "content_html": "

\u8bd5\u4e86 Html CSS Support \u7b49\u63d2\u4ef6\uff0c\u53d1\u73b0\u662f\u8981\u5148\u5728 CSS \u4e2d\u8d77\u540d\uff0c\u7136\u540e\u5728 Html \u6587\u4ef6\u4e2d\u5199\u6807\u7b7e\u65f6\u81ea\u52a8\u63d0\u793a\u7c7b\u540d\uff0c\u8fd9\u4e0e\u6211\u7684\u9700\u6c42\u6070\u6070\u53cd\u4e86\u8fc7\u6765\u3002\u96be\u9053\u8bf4\u6807\u51c6\u7684\u505a\u6cd5\u662f\u5148\u5728 CSS \u4e2d\u8d77\u540d\uff0c\u540e\u5728 Html \u4e2d\u8c03\u7528\u5417\uff1f

\n" }, { "author": { "url": "member/woshichuanqilz", "name": "woshichuanqilz", "avatar": "https://cdn.v2ex.com/avatar/2c38/70c1/139700_large.png?m=1681181757" }, "url": "t/904803", "date_modified": "2022-12-26T11:03:09+00:00", "content_html": "

\u8fd9\u4e2a\u662f\u6211\u7684\u4ee3\u7801, \u5982\u679c.square \u79fb\u9664 flex \u7279\u6027, before \u5c31\u770b\u4e0d\u89c1\u4e86, \u4e3a\u4ec0\u4e48\u4f1a\u8fd9\u6837?\n\u6211\u67e5\u4e86 mdn \u6ca1\u627e\u5230\u76f8\u5173\u7684\u5185\u5bb9

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Title</title>\n <style>\n .square {\n width: 100px;\n height: 100px;\n background-color: blue;\n color: white;\n/* \u5982\u679c\u53bb\u6389\u8fd9\u4e2a flex before \u5c31\u770b\u4e0d\u89c1\u4e86 */\n display: flex;\n }\n .square::before {\n content: \"\";\n width: 50px;\n height: 50px;\n background: lightgreen;\n }\n .square::after {\n content: \"\";\n }\n\n .text::before{\n content: \"t1\";\n color: red;\n }\n .text::after{\n content: \"t2\";\n color: red;\n }\n\n </style>\n\n</head>\n<body>\n <div class=\"square\"></div>\n <p class=\"text\">love</p>\n</body>\n</html>\n

\n", "date_published": "2022-12-26T11:02:23+00:00", "title": "css \u95ee\u9898\u4e3a\u4ec0\u4e48 flex \u4f1a\u5f71\u54cd before \u7684\u663e\u793a\u6548\u679c?", "id": "t/904803" }, { "author": { "url": "member/he2020", "name": "he2020", "avatar": "https://cdn.v2ex.com/avatar/4398/e65d/504539_large.png?m=1660734656" }, "url": "t/902570", "date_modified": "2022-12-14T14:42:43+00:00", "content_html": "

\u901a\u5e38\u662f\u8fd9\u4e48\u7528\u7684\uff1a

.fa-camera-retro:before {\n content: \"\\f083\";\n}\n\n<p>\n <i class=\"fa fa-camera-retro\"></i>\n <span>fa-camera-retro</span>\n</p>\n

\u4e3a\u4ec0\u4e48\u4e0d\u8bbe\u8ba1\u6210\u4e0b\u9762\u8fd9\u4e48\u7528\uff1a

<p>\n <i>\\f083</i>\n <span>fa-camera-retro</span>\n</p>\n

\n", "date_published": "2022-12-14T14:41:22+00:00", "title": "\u5b57\u4f53\u56fe\u6807\uff0c\u4e3a\u4ec0\u4e48\u4e0d\u8bbe\u8ba1\u6210\u5c06 icon \u7684 unicode \u5199\u5728 html \u4e0a\uff0c\u800c\u8981\u7528\u4e0a\u4f2a\u5143\u7d20", "id": "t/902570" }, { "author": { "url": "member/estk", "name": "estk", "avatar": "https://cdn.v2ex.com/avatar/12f5/d602/576589_large.png?m=1704726369" }, "url": "t/900423", "title": "\u7f51\u9875\u7070\u8272\u7b80\u6d01\u4ee3\u7801", "id": "t/900423", "date_published": "2022-12-06T02:37:56+00:00", "content_html": "

Chrome Console \u8f93\u5165

const style=document.createElement('style');style.innerText='*{filter:grayscale(1)!important}';document.getElementsByTagName('head')[0].appendChild(style)\n

\u7136\u540e\u56de\u8f66

grayscale(1) \u5168\u7070

grayscale(0) \u5168\u5f69

$\"\"$

\n" }, { "author": { "url": "member/snoopyhai", "name": "snoopyhai", "avatar": "https://cdn.v2ex.com/avatar/6953/aa78/23785_large.png?m=1663313106" }, "url": "t/899317", "title": "filter: grayscale(100%) \u8fd9\u73a9\u610f\u5f3a\u5236\u5b50\u5143\u7d20\u7ee7\u627f\uff1f\u80fd\u4e0d\u80fd\u8ba9\u67d0\u4e9b\u533a\u57df\u4e0d\u53d8", "id": "t/899317", "date_published": "2022-12-01T05:59:30+00:00", "content_html": "

\u6bd4\u5982\uff0c\u6211\u8fd9\u4e24\u5929\u5728\u7814\u7a76\u6d4f\u89c8\u5668\u63d2\u4ef6\u5462\uff0c\u6ce8\u5165\u9875\u9762\u7684 content-sripts \u90e8\u5206\u4e5f\u88ab\u641e\u7070\u4e86\uff0c\u80fd\u5426\u5728\u5b50\u5143\u7d20\u4e0a\u6062\u590d\u8272\u5f69\uff1f

\n" }, { "author": { "url": "member/makelove", "name": "makelove", "avatar": "https://cdn.v2ex.com/avatar/d765/7583/1838_large.png?m=1645686279" }, "url": "t/897354", "title": "\u624b\u673a\u6d4f\u89c8\u5668\u4e00\u4e2a\u5bb9\u5668\u8bbe\u7f6e\u4e86 overflow: scroll \u540e\uff0c\u6709\u6ca1\u6709\u76f8\u5173\u8bbe\u7f6e\u53ef\u4ee5\u8ba9\u5185\u5bb9\u4e0d\u8db3\u4ee5\u663e\u793a\u6eda\u52a8\u6761\u65f6\u4e5f\u6709\u6a61\u76ae\u5f39\u6027\u6548\u679c\uff1f", "id": "t/897354", "date_published": "2022-11-23T06:46:27+00:00", "content_html": "

\u4e00\u4e2a\u5e26 overflow:scroll \u7684\u5168\u5c4f\u9605\u8bfb\u6587\u5b57\u5757\uff0c\u5185\u5bb9\u8fc7\u5927\u6709\u6eda\u52a8\u6761\u65f6\u62c9\u52a8\u65f6\u4f1a\u6709\u5f39\u6027\u6548\u679c\uff0c\u90a3\u6587\u5b57\u5c11\u4e86\u4e00\u70b9\u6ca1\u6709\u6eda\u52a8\u6761\u65f6\u7f51\u9875\u6478\u4e0a\u53bb\u8c61\u6b7b\u673a\u4e86\u4e00\u6837\u6beb\u65e0\u53cd\u5e94\u4e86, \u8fd9\u548c\u6d4f\u89c8\u5668\u539f\u751f\u4e0d\u4e00\u6837\uff0c\u6d4f\u89c8\u5668\u6253\u5f00\u4e00\u4e2a\u5c0f\u6587\u7ae0\u65f6\u5373\u4f7f\u6ca1\u6709\u6eda\u52a8\u6761\u4e5f\u80fd\u62c9\u52a8\uff08\u53ea\u4e0d\u8fc7\u62c9\u4e86\u540e\u4f1a\u5f39\u56de\u53bb\u800c\u5df2\uff09\u3002

\n" }, { "author": { "url": "member/humbass", "name": "humbass", "avatar": "https://cdn.v2ex.com/gravatar/167e7101a0d1f1af92baf53ad32ee4f4?s=73&d=retro" }, "url": "t/889397", "title": "\u5173\u4e8e\u4e3b\u9898\u5207\u6362\u7684\u7591\u95ee", "id": "t/889397", "date_published": "2022-10-24T07:23:39+00:00", "content_html": "

\u672c\u4eba\u662f\u4e1a\u4f59\u7a0b\u5e8f\u5458\uff0cCSS \u57fa\u7840\u4f1a\u5199\uff0c\u65e9\u671f\u5c31\u6709\u6362\u4e3b\u9898\u8fd9\u4e2a\u95ee\u9898\uff0c\u4e00\u822c\u662f\u9700\u8981\u5b9a\u4e49\u4e24\u5957 CSS \uff0c\u7136\u540e\u5207\u6362\uff1b

\u73b0\u5728 MacOS \u7684 Light, Dark \u8fd9\u6837\u7684\u4e3b\u9898\uff0c\u4e5f\u662f\u9700\u8981\u5199\u4e24\u5957\u5417\uff1f

\n" }, { "author": { "url": "member/tmo", "name": "tmo", "avatar": "https://cdn.v2ex.com/gravatar/d3acca912e67716a54a369484385a8a9?s=73&d=retro" }, "url": "t/888551", "date_modified": "2022-10-20T14:29:57+00:00", "content_html": "

\u5982\u9898\uff0c\u60f3\u8981\u5728\u7f51\u7ad9\u4f7f\u7528\u4e2d\u6587\u5b57\u4f53\uff0c\u51e0\u5341 mb \uff0c\u7528 css font-face unicode-range \u4f3c\u4e4e\u53ef\u4ee5\u5b9e\u73b0\u5207\u5757\uff0c\u4f46\u662f\u4e0d\u77e5\u9053\u7528\u4ec0\u4e48\u5de5\u5177\u6765\u751f\u6210

\u4f8b\u5982\u5c0f\u7c73\u7f51\u7ad9\u7684 misans\uff1a https://font.sec.miui.com/font/css?family=MiSans:300,450,500,650,800:Chinese_Simplify,Latin&display=swap

\n", "date_published": "2022-10-20T14:26:38+00:00", "title": "\u6709\u4ec0\u4e48\u5b57\u4f53\u6587\u4ef6\u5207\u5757\u7684\u5de5\u5177\u561b", "id": "t/888551" }, { "author": { "url": "member/monster1priest", "name": "monster1priest", "avatar": "https://cdn.v2ex.com/avatar/115e/8f70/543764_large.png?m=1726380524" }, "url": "t/883275", "title": "\u5982\u4f55\u68c0\u67e5\u4e0d\u540c\u6d4f\u89c8\u5668\u5bf9 CSS \u7684\u517c\u5bb9\u6027\u652f\u6301\uff1f", "id": "t/883275", "date_published": "2022-09-27T06:10:58+00:00", "content_html": "\u6709\u6ca1\u6709\u4ec0\u4e48\u597d\u7528\u7684\u63d2\u4ef6\u6216\u7f51\u7ad9\uff0c\u53ef\u4ee5\u6279\u91cf\u68c0\u67e5 CSS \u5bf9\u4e0d\u540c\u6d4f\u89c8\u5668\u7684\u652f\u6301\u7a0b\u5ea6\uff1f
MDN \u91cc\u9762\u5217\u51fa\u4e86\u6240\u6709\u6d4f\u89c8\u5668\u5bf9\u67d0\u4e2a\u5c5e\u6027\u548c\u503c\u7684\u652f\u6301\u7a0b\u5ea6\uff0c\u6211\u60f3\u80fd\u6279\u91cf\u505a\u4e0b\u68c0\u67e5\uff0c\u66ff\u6362\u6389\u90a3\u4e9b\u517c\u5bb9\u6027\u5dee\u7684\u5c5e\u6027\u3002" }, { "author": { "url": "member/Livid", "name": "Livid", "avatar": "https://cdn.v2ex.com/avatar/c4ca/4238/1_large.png?m=1776750814" }, "url": "t/872617", "date_modified": "2022-08-13T06:50:08+00:00", "content_html": "

https://github.com/sakofchit/system.css", "date_published": "2022-08-13T06:49:39+00:00", "title": "System.css", "id": "t/872617" }, { "author": { "url": "member/CoolSpring", "name": "CoolSpring", "avatar": "https://cdn.v2ex.com/avatar/7af2/0bb1/67329_large.png?m=1659247726" }, "url": "t/869771", "date_modified": "2022-07-31T06:24:18+00:00", "content_html": "\u80cc\u666f\uff1a
\u6211\u5728\u81ea\u5df1\u7684 hobby project \u4e2d\u4e60\u60ef\u4f7f\u7528 Tailwind CSS \u548c UnoCSS \uff0c\u89c9\u5f97\u5f00\u53d1\u6548\u7387\u5f88\u9ad8\uff0c\u4f46\u5728\u5de5\u4f5c\u4e2d\u9700\u8981\u9075\u5faa\u7ec4\u5185\u89c4\u8303\u4f7f\u7528 Sass \u3002\u90a3\u4e48\uff0c\u6709\u6ca1\u6709\u53ef\u80fd\u5148\u7528\u539f\u5b50\u5316 CSS \u7684\u5199\u6cd5\u8fdb\u884c\u5f00\u53d1\uff0c\u4f46\u5728 git commit \u524d\u7528\u5de5\u5177\u8f6c\u6362\u6210 Sass/Less \uff1f

\u8bbe\u60f3\u7684\u5de5\u4f5c\u6d41\uff1a
\u5148\u628a\u6837\u5f0f\u7edf\u7edf\u5199\u5728 class \u91cc\uff0c\u7136\u540e\u7528\u4e00\u4e2a CLI \u5de5\u5177\u8f6c\u6362\uff0c\u6216\u8005\u7528\u4e00\u4e2a VSCode \u63d2\u4ef6\u201c\u91cd\u6784\u201d\u3002\u5f97\u5230\u7684\u7ed3\u679c\u662f\u6e90\u6587\u4ef6\u4e2d JSX \u6216\u6a21\u7248\u91cc\u7684\u957f\u4e32 class \u540d\u88ab\u66ff\u6362\u6210\u5355\u4e2a\u968f\u673a\u540d\u79f0\uff08\u540e\u7eed\u6309\u7167\u5176\u7528\u9014\u4eba\u5de5\u91cd\u547d\u540d\uff09\uff0c\u5e76\u751f\u6210\u4e00\u4efd\u5bf9\u5e94\u7684\u5e26\u5d4c\u5957\u5c42\u7ea7\u7684 sass/less \u6587\u4ef6\u3002

\u6982\u62ec\u9700\u6c42\uff1a
\u60f3\u4e00\u4e2a\u82f1\u6587\u5ba3\u4f20\u8bed\u5c31\u662f\uff1aWrite in \"Atomic CSS\" way, convert to nested CSS before you commit.
\u662f\u5426\u5df2\u6709\u6b64\u7c7b\u578b\u7684\u5de5\u5177\uff1f\u5982\u679c\u6ca1\u6709\uff0c\u5f00\u53d1\u4e00\u4e2a\u6709\u610f\u4e49\u548c\u6280\u672f\u4e0a\u7684\u53ef\u80fd\u6027\u5417\uff1f

\u76f8\u4f3c\u4f46\u4e0d\u592a\u4e00\u6837\u7684\u65b9\u6848\uff1a
1. \u4e86\u89e3\u5230 Windi CSS \u6709\u4e00\u4e2a Compilation Mode https://windicss.org/posts/modes.html#compilation-mode \uff0c\u80fd\u628a\u4e00\u4e32 class \u8f6c\u5316\u4e3a\u5f62\u5982\u201cwindi-15wa4me\u201d\u7684\u5355\u4e2a class \u540d\uff0c\u4f46\u5b83\u8fd9\u4e2a\u5e94\u8be5\u662f\u5728\u7f16\u8bd1\u65f6\u751f\u6210\u7684\u4ea7\u7269\u4e2d\u51fa\u73b0\uff0c\u800c\u6211\u5e0c\u671b\u5728\u5f00\u53d1\u65f6\u63d0\u4ea4\u7ec4\u4ef6\u7684\u6e90\u4ee3\u7801\u5230 GitLab \u524d\u5c31\u505a\u8f6c\u6362\u3002
2. Tailwind CSS \u6709 shortcuts \uff0cSass \u6709 apply \uff0c\u4f46\u8fd9\u4e24\u8005\u90fd\u9700\u8981\u5728\u9879\u76ee\u91cc\u989d\u5916\u914d\u7f6e Tailwind CSS \uff0c\u5e76\u4e14\u4e5f\u6ca1\u90a3\u4e48\u65b9\u4fbf\u8fdb\u884c\u201c\u4e00\u628a\u68ad\u201d\u4e86\uff0c\u548c\u8fd9\u4e2a\u60f3\u6cd5\u7684\u521d\u8877\u4e0d\u7b26\u3002", "date_published": "2022-07-31T06:20:01+00:00", "title": "\u6709\u6ca1\u6709\u53ef\u80fd\u5728\u5f00\u53d1\u65f6\u5199 Tailwind CSS\uff0c\u5728\u63d0\u4ea4\u4ee3\u7801\u524d\u8f6c\u6362\u6210\u5e26\u5d4c\u5957\u5173\u7cfb\u7684 Sass\uff1f", "id": "t/869771" }, { "author": { "url": "member/dufu1991", "name": "dufu1991", "avatar": "https://cdn.v2ex.com/avatar/93d1/bf6f/379730_large.png?m=1774861227" }, "url": "t/865394", "title": "\u8bf7\u6559\u5927\u4f6c\u4e00\u4e2a\u524d\u7aef\u5f00\u53d1\u7684\u95ee\u9898\u3002", "id": "t/865394", "date_published": "2022-07-11T03:59:41+00:00", "content_html": "\u7ed9\u5143\u7d20\u8bbe\u7f6e\u4e86 CSS \u52a8\u753b\uff0c\u53c8\u7ed9\u5143\u7d20\u8bbe\u7f6e\u4e86 visibility: hidden \u5c5e\u6027\uff0c\u5143\u7d20\u4e0d\u53ef\u89c1\u4f46\u662f\u8fd8\u5360\u7740\u4f4d\u7f6e\uff0c\u90a3 CSS \u52a8\u753b\u867d\u7136\u770b\u4e0d\u89c1\uff0c\u8fd8\u4f1a\u5360\u7528\u6d4f\u89c8\u5668 cpu \u6216\u8005 gpu \u8d44\u6e90\u5417\uff1f" }, { "author": { "url": "member/frozenway", "name": "frozenway", "avatar": "https://cdn.v2ex.com/avatar/c684/ffbb/226009_large.png?m=1644474092" }, "url": "t/864250", "title": "\u5c0f\u7c73\u624b\u673a\u81ea\u5e26\u6d4f\u89c8\u5668\u65e0\u6cd5\u6253\u5f00\u4f7f\u7528\u897f\u74dc\u64ad\u653e\u5668\u63d2\u4ef6\u7684\u7f51\u9875\u89c6\u9891\uff0c\u662f\u4ec0\u4e48\u539f\u56e0\uff1f", "id": "t/864250", "date_published": "2022-07-05T09:08:53+00:00", "content_html": "

\u89c6\u9891\u7f51\u5740 https://v2.h5player.bytedance.com/examples/