{
  "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": "https://www.v2ex.com/go/css", 
  "feed_url": "https://www.v2ex.com/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": "https://www.v2ex.com/member/Livid", 
        "name": "Livid", 
        "avatar": "https://cdn.v2ex.com/avatar/c4ca/4238/1_large.png?m=1775624785"
      }, 
      "url": "https://www.v2ex.com/t/1192530", 
      "title": "Oak", 
      "id": "https://www.v2ex.com/t/1192530", 
      "date_published": "2026-02-12T10:44:57+00:00", 
      "content_html": "<a target=\"_blank\" href=\"https://oat.ink/\" rel=\"nofollow noopener\">https://oat.ink/</a><br /><br />\u4e00\u4e2a\u975e\u5e38\u8f7b\u91cf\u7ea7\u7684 UI \u5e93\u3002<br /><br />6KB CSS + 2.2KB JS"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/Livid", 
        "name": "Livid", 
        "avatar": "https://cdn.v2ex.com/avatar/c4ca/4238/1_large.png?m=1775624785"
      }, 
      "url": "https://www.v2ex.com/t/1180133", 
      "title": "CSS Grid Lanes", 
      "id": "https://www.v2ex.com/t/1180133", 
      "date_published": "2025-12-20T06:16:18+00:00", 
      "content_html": "<p><a href=\"https://webkit.org/blog/17660/introducing-css-grid-lanes/\" rel=\"nofollow\">https://webkit.org/blog/17660/introducing-css-grid-lanes/</a></p>\n<p><img alt=\"\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://webkit.org/wp-content/uploads/Grid-Lanes-varying-widths-light.png\"/></p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/HMYang33", 
        "name": "HMYang33", 
        "avatar": "https://cdn.v2ex.com/avatar/c24b/8e90/675719_large.png?m=1770955236"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/1153682", 
      "date_published": "2025-08-20T06:03:56+00:00", 
      "content_html": "<a target=\"_blank\" href=\"https://imgur.com/a/KrTz0WA\" rel=\"nofollow noopener\">https://imgur.com/a/KrTz0WA</a>"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/williamherry", 
        "name": "williamherry", 
        "avatar": "https://cdn.v2ex.com/avatar/f5aa/7691/36139_large.png?m=1739421841"
      }, 
      "url": "https://www.v2ex.com/t/1148785", 
      "date_modified": "2025-07-30T07:46:03+00:00", 
      "content_html": "<p>\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</p>\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": "https://www.v2ex.com/t/1148785"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/sugarkeek", 
        "name": "sugarkeek", 
        "avatar": "https://cdn.v2ex.com/avatar/dbe9/73b9/172054_large.png?m=1745726832"
      }, 
      "url": "https://www.v2ex.com/t/1125973", 
      "title": "\u6280\u672f\u6587\u7ae0\u7ffb\u8bd1\uff1a CSS \u5b9e\u73b0\u6781\u7b80\u7684 LQIP", 
      "id": "https://www.v2ex.com/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<br /><br />[\u4ec5\u7528 CSS \u5b9e\u73b0\u6781\u7b80\u7684\u6a21\u7cca\u56fe\u7247\u5360\u4f4d\u7b26]( <a target=\"_blank\" href=\"https://halo.chenkeyan.com/archives/fe-weekly-8-css-lqip\" rel=\"nofollow noopener\">https://halo.chenkeyan.com/archives/fe-weekly-8-css-lqip</a>)<br /><br />\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<br /><br />\u6548\u679c\u53ef\u4ee5\u770b\u770b\uff1a<br /><br /><a target=\"_blank\" href=\"https://i.imgur.com/kYOJC1F.png\" rel=\"nofollow noopener\" target=\"_blank\"><img src=\"https://i.imgur.com/kYOJC1F.png\" class=\"embedded_image\" rel=\"noreferrer\"></a><br /><br />\u82f1\u6587\u539f\u6587\u5728\u8fd9\uff1a <a target=\"_blank\" href=\"https://leanrada.com/notes/css-only-lqip/\" rel=\"nofollow noopener\">https://leanrada.com/notes/css-only-lqip/</a><br /><br />\u53ef\u4ee5\u770b\u770b\u4f5c\u8005\u7684 demo\uff1a<br /><br /><a target=\"_blank\" href=\"https://leanrada.com/notes/css-only-lqip/gallery/\" rel=\"nofollow noopener\">https://leanrada.com/notes/css-only-lqip/gallery/</a><br /><br />\u8fd9\u662f\u6211\u590d\u73b0\u7684\uff1a<br /><br /><a target=\"_blank\" href=\"https://codepen.io/showmecode_ahh/pen/VYYwjZq\" rel=\"nofollow noopener\">https://codepen.io/showmecode_ahh/pen/VYYwjZq</a>"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/chemms", 
        "name": "chemms", 
        "avatar": "https://cdn.v2ex.com/gravatar/6288bfbe061b012e656e67f1d21ea3fd?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/1122874", 
      "title": "unocss \u7684\u987a\u5e8f\u95ee\u9898\uff0c\u6c42\u5927\u4f6c\u89e3\u60d1", 
      "id": "https://www.v2ex.com/t/1122874", 
      "date_published": "2025-04-02T07:43:27+00:00", 
      "content_html": "<p>\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</p>\n<pre><code>&lt;div className=\"size-50px bg-green bg-red bg-blue\"&gt;&lt;/div&gt;\n</code></pre>\n<p>\u5c31\u662f\u60f3\u7ec4\u4ef6\u7684\u4f20\u5165 className \u7075\u6d3b\u4e9b\uff0c\u53ef\u4ee5\u76f4\u63a5\u6ce8\u5165</p>\n<pre><code>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</code></pre>\n<p>\u6709\u8fd9\u4e9b\u76f8\u5173\u7684\u914d\u7f6e\u5417\uff0c\u627e\u4e86\u4e00\u5708\u4e86</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/17681880207", 
        "name": "17681880207", 
        "avatar": "https://cdn.v2ex.com/avatar/8880/375b/303637_large.png?m=1774597204"
      }, 
      "url": "https://www.v2ex.com/t/1112790", 
      "date_modified": "2025-02-20T02:37:13+00:00", 
      "content_html": "<p>\u6211\u6709\u4e2a\u7ec4\u4ef6\u7684 html \u5b9a\u4e49\u5982\u4e0b\uff1a  </p>\n<pre><code class=\"language-html\">&lt;!-- \u9ed8\u8ba4\u5361\u7247 --&gt;\n&lt;div class=\"card\"&gt;\n  &lt;div class=\"card__title\"&gt;\n  \t&lt;slot name=\"title\"/&gt;\n  &lt;/div&gt;\n  &lt;div class=\"card__content\"&gt;\n    &lt;slot name=\"content\"/&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n\n&lt;!-- \u8b66\u544a\u5361\u7247\u6837\u5f0f --&gt;\n&lt;div class=\"card card--warning\"&gt;\n  &lt;div class=\"card__title\"&gt;\n  \t&lt;slot name=\"title\"/&gt;\n  &lt;/div&gt;\n  &lt;div class=\"card__content\"&gt;\n    &lt;slot name=\"content\"/&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n\n&lt;!-- \u6210\u529f\u5361\u7247\u6837\u5f0f --&gt;\n&lt;div class=\"card card--successful\"&gt;\n  &lt;div class=\"card__title\"&gt;\n  \t&lt;slot name=\"title\"/&gt;\n  &lt;/div&gt;\n  &lt;div class=\"card__content\"&gt;\n    &lt;slot name=\"content\"/&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>\u5173\u4e8e SCSS \u6211\u7684\u60f3\u6cd5\u662f\uff1a</p>\n<pre><code class=\"language-scss\">// \u8fd9\u91cc\u5b9a\u4e49\u4e86\u666e\u901a\u5361\u7247\u6837\u7684\u6837\u5f0f\n.card {\n  &amp;__title {\n    color: gray;\n  }\n  \n  &amp;__content {\n    color: lightgray;\n  }\n  \n  // \u5b9a\u4e49\u8b66\u544a\u5361\u7247\u7684\u6837\u5f0f\n  &amp;--warning {\n    &amp;__title {\n      color: yellow;\n    }\n  \n    &amp;__content {\n      color: lightyello;\n    }\n  }\n  \n  // \u5b9a\u4e49\u6210\u529f\u5361\u7247\u7684\u6837\u5f0f\n  &amp;--successful {\n    &amp;__title {\n      color: green;\n    }\n  \n    &amp;__content {\n      color: lightgreen;\n    }\n  }\n}\n</code></pre>\n<p>\u4f46\u662f\u8b66\u544a\u5361\u7247\u548c\u6210\u529f\u5361\u7247\u7684 css \u4f1a\u88ab\u89e3\u6790\u4e3a\uff1a</p>\n<pre><code class=\"language-css\">.card--warning__title {}\n.card--warning__content {}\n\n.card--successful__title {}\n.card--successful__content {}\n</code></pre>\n<p>\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</p>\n<pre><code class=\"language-html\">&lt;div class=\"card card--warning\"&gt;\n  &lt;div class=\"card--warning__title\"&gt;&lt;!-- \u800c\u4e0d\u662f &lt;div class=\"card__title\"&gt; --&gt;\n  \t&lt;slot name=\"title\"/&gt;\n  &lt;/div&gt;\n  &lt;div class=\"card-warning__content\"&gt;&lt;!-- \u800c\u4e0d\u662f &lt;div class=\"card__content\"&gt; --&gt;\n    &lt;slot name=\"content\"/&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>\u8bf7\u95ee\u5404\u4f4d\u8001\u54e5\uff0cSCSS \u5e94\u8be5\u600e\u4e48\u6765\u5b9a\u4e49\u6837\u5f0f\u554a\uff1f</p>\n", 
      "date_published": "2025-02-19T18:05:11+00:00", 
      "title": "\u8001\u54e5\u4eec\uff0c\u95ee\u4e00\u4e2a SCSS \u7684\u95ee\u9898", 
      "id": "https://www.v2ex.com/t/1112790"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/Leon6868", 
        "name": "Leon6868", 
        "avatar": "https://cdn.v2ex.com/avatar/14ed/48e6/438369_large.png?m=1748955348"
      }, 
      "url": "https://www.v2ex.com/t/1110159", 
      "title": "Chrome 133.0.6943.60 @media (pointer: fine) \u5931\u6548\uff1f", 
      "id": "https://www.v2ex.com/t/1110159", 
      "date_published": "2025-02-09T15:07:27+00:00", 
      "content_html": "<p>\u5982\u9898\uff0c\u6bd4\u5982 <a href=\"https://gemini.google.com/app\" rel=\"nofollow\">https://gemini.google.com/app</a> gemini \u7684\u6eda\u52a8\u6761\u6837\u5f0f\u5728 @media (pointer: fine){} \u4e2d\u5b9a\u4e49\uff0c\u4f46\u662f\u73b0\u5728\u5df2\u7ecf\u5931\u6548\u4e86</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/Rust2015", 
        "name": "Rust2015", 
        "avatar": "https://cdn.v2ex.com/avatar/51fd/c72d/674984_large.png?m=1738501691"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/1104094", 
      "date_published": "2025-01-10T03:09:55+00:00", 
      "content_html": "<p>\u8bd5\u4e86\u597d\u51e0\u6b3e\uff0c\u5bfc\u51fa\u540e\u4ee3\u7801\u597d\u4e71\uff0c\u4e0d\u7406\u60f3</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/dre4m", 
        "name": "dre4m", 
        "avatar": "https://cdn.v2ex.com/gravatar/29753bb9e01f6d6e3c6228978096e7f1?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/1099229", 
      "date_modified": "2025-01-17T13:28:26+00:00", 
      "content_html": "<p>\u56fe\u5728\u8fd9\u91cc\uff1a\n<a href=\"https://www.filestall.com/TOfADvH0XIPnL1s/preview\" rel=\"nofollow\">https://www.filestall.com/TOfADvH0XIPnL1s/preview</a></p>\n<p>\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</p>\n<p><a href=\"http://spajishi.com\" rel=\"nofollow\">spajishi.com</a>  \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</p>\n", 
      "date_published": "2024-12-21T02:39:45+00:00", 
      "title": "\u95ee\u4e2a\u7b80\u5355\u7684 CSS \u95ee\u9898", 
      "id": "https://www.v2ex.com/t/1099229"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/kaiki", 
        "name": "kaiki", 
        "avatar": "https://cdn.v2ex.com/avatar/a68b/3734/478696_large.png?m=1707406444"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/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<br />\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": "https://www.v2ex.com/member/jin7", 
        "name": "jin7", 
        "avatar": "https://cdn.v2ex.com/gravatar/907157f5c2e3acf2a45818cc0d32e213?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/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<br /><br />\u5927\u4f6c\u4eec \u6ca1\u770b\u660e\u767d\u8fd9\u53e5\u8bdd\u4ec0\u4e48\u610f\u601d."
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/abcbuzhiming", 
        "name": "abcbuzhiming", 
        "avatar": "https://cdn.v2ex.com/avatar/eced/0c34/112484_large.png?m=1673873219"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/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<br /><br /><br />\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<br /><br />\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<br /><br />\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": "https://www.v2ex.com/member/17681880207", 
        "name": "17681880207", 
        "avatar": "https://cdn.v2ex.com/avatar/8880/375b/303637_large.png?m=1774597204"
      }, 
      "url": "https://www.v2ex.com/t/1061799", 
      "date_modified": "2024-08-02T02:35:48+00:00", 
      "content_html": "<h4>\u6d89\u53ca\u6280\u672f\u6808</h4>\n<p>electron-vite / vue3</p>\n<h4>\u95ee\u9898\u63cf\u8ff0</h4>\n<p>\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<br/>\n\u65e0\u6cd5\u52a0\u8f7d\u7684\u8868\u73b0\u5f62\u5f0f\u4e3a\uff0c\u7070\u8272\uff0c\u5982\u56fe\uff1a\n<img alt=\"d048f570e8510b051af9574c4a63047\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://img.picgo.net/2024/08/01/d048f570e8510b051af9574c4a630479437c43a35dfbb00.png\"/></p>\n<h4>\u76ee\u524d\u6211\u7684\u89e3\u51b3\u65b9\u6848</h4>\n<p>\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</p>\n<h4>\u95ee\u9898</h4>\n<p>\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</p>\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": "https://www.v2ex.com/t/1061799"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/abcbuzhiming", 
        "name": "abcbuzhiming", 
        "avatar": "https://cdn.v2ex.com/avatar/eced/0c34/112484_large.png?m=1673873219"
      }, 
      "url": "https://www.v2ex.com/t/1061516", 
      "title": "\u5982\u4f55\u6284\u4eba\u5bb6\u7684\u5e03\u5c40\uff1f", 
      "id": "https://www.v2ex.com/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<br /><br />\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": "https://www.v2ex.com/member/hblevins", 
        "name": "hblevins", 
        "avatar": "https://cdn.v2ex.com/gravatar/f0be7b21d3d98bc7b1057492aa264e46?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/1054634", 
      "title": "\u4e0b\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u5982\u4f55\u89e3\u91ca div \u7684\u9ad8\u5ea6\uff1f", 
      "id": "https://www.v2ex.com/t/1054634", 
      "date_published": "2024-07-03T11:38:22+00:00", 
      "content_html": "<p>\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</p>\n<p>\u4e24\u4e2a\u73b0\u8c61\uff1a<br/>\n1 \u3001\u5f53 div \u548c span \u7684 font-size \u8bbe\u7f6e\u4e3a\u76f8\u540c\u503c\u65f6\uff0cdiv \u7684\u9ad8\u5ea6\u4f1a\u4e3a 0 <strong>\uff08\u8fd9\u53c8\u662f\u4e3a\u4ec0\u4e48\u5462\uff1f\uff09</strong><br/>\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<code>&lt;!DOCTYPE html&gt;</code>\uff0c\u6d4f\u89c8\u5668\u5c06\u4f1a\u4ee5\u602a\u5f02\u6a21\u5f0f\u7684\u65b9\u5f0f\u53bb\u6e32\u67d3\u3002</p>\n<p>\u4ee3\u7801\u5730\u5740\uff1a <a href=\"https://jsbin.com/ziyimaleqe/edit?html,output\" rel=\"nofollow\">https://jsbin.com/ziyimaleqe/edit?html,output</a></p>\n<p><img alt=\"div-height.png\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://s2.loli.net/2024/07/03/u8UkM1AOgvQhZEY.png\"/></p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/hblevins", 
        "name": "hblevins", 
        "avatar": "https://cdn.v2ex.com/gravatar/f0be7b21d3d98bc7b1057492aa264e46?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/1053054", 
      "date_published": "2024-06-27T05:09:31+00:00", 
      "content_html": "<p><a href=\"https://jsbin.com/hujodilogi/edit?html,output\" rel=\"nofollow\">https://jsbin.com/hujodilogi/edit?html,output</a></p>\n<p><img alt=\"Snipaste_2024-06-27_13-08-20.png\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://s2.loli.net/2024/06/27/34JaqNkBAtl1Ixc.png\"/></p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/jiguang", 
        "name": "jiguang", 
        "avatar": "https://cdn.v2ex.com/avatar/1597/8ec9/30882_large.png?m=1730381494"
      }, 
      "url": "https://www.v2ex.com/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<br /><br />\u514d\u8d39\u7684 Tailwind CSS Component \u5408\u96c6\uff1a<br />1. shadcn/ui: <a target=\"_blank\" href=\"https://ui.shadcn.com\" rel=\"nofollow noopener\">https://ui.shadcn.com</a><br />2. daisyUI: <a target=\"_blank\" href=\"https://daisyui.com/\" rel=\"nofollow noopener\">https://daisyui.com/</a><br />3. Sailboat UI: <a target=\"_blank\" href=\"https://sailboatui.com/\" rel=\"nofollow noopener\">https://sailboatui.com/</a><br />4. Preline UI: <a target=\"_blank\" href=\"https://preline.co/\" rel=\"nofollow noopener\">https://preline.co/</a><br />5. tailbits: <a target=\"_blank\" href=\"https://www.tailbits.com/\" rel=\"nofollow noopener\">https://www.tailbits.com/</a><br />6. Tailwind Toolbox: <a target=\"_blank\" href=\"https://www.tailwindtoolbox.com/\" rel=\"nofollow noopener\">https://www.tailwindtoolbox.com/</a><br />7. Tailwind Awesome: <a target=\"_blank\" href=\"https://www.tailwindawesome.com/\" rel=\"nofollow noopener\">https://www.tailwindawesome.com/</a><br />8. Meraki UI: <a target=\"_blank\" href=\"https://merakiui.com/\" rel=\"nofollow noopener\">https://merakiui.com/</a><br />9. Flowbite: <a target=\"_blank\" href=\"https://flowbite.com/\" rel=\"nofollow noopener\">https://flowbite.com/</a><br />10. LangUI: <a target=\"_blank\" href=\"https://www.langui.dev/\" rel=\"nofollow noopener\">https://www.langui.dev/</a><br />11. cruip: <a target=\"_blank\" href=\"https://cruip.com/\" rel=\"nofollow noopener\">https://cruip.com/</a><br />12. Tailspark: <a target=\"_blank\" href=\"https://tailspark.co/\" rel=\"nofollow noopener\">https://tailspark.co/</a><br />13. Tailsc: <a target=\"_blank\" href=\"https://tailsc.com/\" rel=\"nofollow noopener\">https://tailsc.com/</a><br />14. TailGrids: <a target=\"_blank\" href=\"https://tailgrids.com/\" rel=\"nofollow noopener\">https://tailgrids.com/</a><br />15. React Suite: <a target=\"_blank\" href=\"https://rsuitejs.com/\" rel=\"nofollow noopener\">https://rsuitejs.com/</a><br />16. React Bootstrap: <a target=\"_blank\" href=\"https://react-bootstrap.github.io/\" rel=\"nofollow noopener\">https://react-bootstrap.github.io/</a><br />17. Semantic UI React: <a target=\"_blank\" href=\"https://react.semantic-ui.com/\" rel=\"nofollow noopener\">https://react.semantic-ui.com/</a><br />18. Mantine: <a target=\"_blank\" href=\"https://ui.mantine.dev/\" rel=\"nofollow noopener\">https://ui.mantine.dev/</a><br />19. NextUI: <a target=\"_blank\" href=\"https://nextui.org/\" rel=\"nofollow noopener\">https://nextui.org/</a><br />20. TailBlocks: <a target=\"_blank\" href=\"https://tailblocks.cc/\" rel=\"nofollow noopener\">https://tailblocks.cc/</a><br />21. MAMBA UI: <a target=\"_blank\" href=\"https://mambaui.com/\" rel=\"nofollow noopener\">https://mambaui.com/</a><br />22. Shuffle for Tailwind: https://tailwind.build/<br />23. tailkits: <a target=\"_blank\" href=\"https://tailkits.com/\" rel=\"nofollow noopener\">https://tailkits.com/</a><br />24. tailkits: <a target=\"_blank\" href=\"https://tailkits.com/\" rel=\"nofollow noopener\">https://tailkits.com/</a><br />25. HyperUI: <a target=\"_blank\" href=\"https://www.hyperui.dev/\" rel=\"nofollow noopener\">https://www.hyperui.dev/</a><br />26. Easy Frontend: <a target=\"_blank\" href=\"https://easyfrontend.com/\" rel=\"nofollow noopener\">https://easyfrontend.com/</a><br />27. HeadlessUI: <a target=\"_blank\" href=\"https://headlessui.com/\" rel=\"nofollow noopener\">https://headlessui.com/</a><br />28. tailwind UI: <a target=\"_blank\" href=\"https://headlessui.com/\" rel=\"nofollow noopener\">https://headlessui.com/</a><br />29. TW Elements: <a target=\"_blank\" href=\"https://tw-elements.com/\" rel=\"nofollow noopener\">https://tw-elements.com/</a><br />30. UIVerse: <a target=\"_blank\" href=\"https://uiverse.io/\" rel=\"nofollow noopener\">https://uiverse.io/</a><br />31. Chakra UI: <a target=\"_blank\" href=\"https://v2.chakra-ui.com/\" rel=\"nofollow noopener\">https://v2.chakra-ui.com/</a><br />32. Material Tailwind: <a target=\"_blank\" href=\"https://www.material-tailwind.com/\" rel=\"nofollow noopener\">https://www.material-tailwind.com/</a><br />33. Radix: <a target=\"_blank\" href=\"https://www.radix-ui.com/\" rel=\"nofollow noopener\">https://www.radix-ui.com/</a><br />34. Use UI: <a target=\"_blank\" href=\"https://useui.com/\" rel=\"nofollow noopener\">https://useui.com/</a><br />35. Myna UI: <a target=\"_blank\" href=\"https://mynaui.com/\" rel=\"nofollow noopener\">https://mynaui.com/</a><br /><br />\u652f\u6301\u76f4\u63a5\u590d\u5236\u7c98\u8d34\u7684\uff1a<br />1. shadcn/ui: <a target=\"_blank\" href=\"https://ui.shadcn.com\" rel=\"nofollow noopener\">https://ui.shadcn.com</a><br />2. LangUI: <a target=\"_blank\" href=\"https://www.langui.dev/\" rel=\"nofollow noopener\">https://www.langui.dev/</a><br />3. TailBlocks: <a target=\"_blank\" href=\"https://tailblocks.cc/\" rel=\"nofollow noopener\">https://tailblocks.cc/</a><br />4. MAMBA UI: <a target=\"_blank\" href=\"https://mambaui.com/\" rel=\"nofollow noopener\">https://mambaui.com/</a><br />5. Shuffle for Tailwind: https://tailwind.build/<br />6. tailkits: <a target=\"_blank\" href=\"https://tailkits.com/\" rel=\"nofollow noopener\">https://tailkits.com/</a><br />7. tailkits: <a target=\"_blank\" href=\"https://tailkits.com/\" rel=\"nofollow noopener\">https://tailkits.com/</a><br />8. HyperUI: <a target=\"_blank\" href=\"https://www.hyperui.dev/\" rel=\"nofollow noopener\">https://www.hyperui.dev/</a><br />9. Easy Frontend: <a target=\"_blank\" href=\"https://easyfrontend.com/\" rel=\"nofollow noopener\">https://easyfrontend.com/</a><br />10. Myna UI: <a target=\"_blank\" href=\"https://mynaui.com/\" rel=\"nofollow noopener\">https://mynaui.com/</a><br />11. CSS to Tailwind: <a target=\"_blank\" href=\"https://transform.tools/css-to-tailwind\" rel=\"nofollow noopener\">https://transform.tools/css-to-tailwind</a><br />12. Tailwind Play: <a target=\"_blank\" href=\"https://play.tailwindcss.com/\" rel=\"nofollow noopener\">https://play.tailwindcss.com/</a><br />13. heroicons: <a target=\"_blank\" href=\"https://heroicons.com/\" rel=\"nofollow noopener\">https://heroicons.com/</a><br />14. Lucide: <a target=\"_blank\" href=\"https://lucide.dev/\" rel=\"nofollow noopener\">https://lucide.dev/</a><br /><br />\u63d0\u4f9b\u6a21\u677f\u7684\uff1a<br />1. shadcn/ui: <a target=\"_blank\" href=\"https://ui.shadcn.com\" rel=\"nofollow noopener\">https://ui.shadcn.com</a><br />2. Preline UI: <a target=\"_blank\" href=\"https://preline.co/\" rel=\"nofollow noopener\">https://preline.co/</a><br />3. Tailwind Toolbox: <a target=\"_blank\" href=\"https://www.tailwindtoolbox.com/\" rel=\"nofollow noopener\">https://www.tailwindtoolbox.com/</a><br />4. Tailwind Awesome: <a target=\"_blank\" href=\"https://www.tailwindawesome.com/\" rel=\"nofollow noopener\">https://www.tailwindawesome.com/</a><br />5. cruip: <a target=\"_blank\" href=\"https://cruip.com/\" rel=\"nofollow noopener\">https://cruip.com/</a><br />6. Tailspark: <a target=\"_blank\" href=\"https://tailspark.co/\" rel=\"nofollow noopener\">https://tailspark.co/</a><br />7. Tailsc: <a target=\"_blank\" href=\"https://tailsc.com/\" rel=\"nofollow noopener\">https://tailsc.com/</a><br />8. TailGrids: <a target=\"_blank\" href=\"https://tailgrids.com/\" rel=\"nofollow noopener\">https://tailgrids.com/</a><br />9. MAMBA UI: <a target=\"_blank\" href=\"https://mambaui.com/\" rel=\"nofollow noopener\">https://mambaui.com/</a><br />10. Easy Frontend: <a target=\"_blank\" href=\"https://easyfrontend.com/\" rel=\"nofollow noopener\">https://easyfrontend.com/</a><br /><br />\u63d0\u4f9b UI \u5957\u4ef6\u7684\uff1a<br />1. tailbits: <a target=\"_blank\" href=\"https://www.tailbits.com/\" rel=\"nofollow noopener\">https://www.tailbits.com/</a><br />2. Tailwind Toolbox: <a target=\"_blank\" href=\"https://www.tailwindtoolbox.com/\" rel=\"nofollow noopener\">https://www.tailwindtoolbox.com/</a><br />3. Tailwind Awesome: <a target=\"_blank\" href=\"https://www.tailwindawesome.com/\" rel=\"nofollow noopener\">https://www.tailwindawesome.com/</a><br />4. tailkits: <a target=\"_blank\" href=\"https://tailkits.com/\" rel=\"nofollow noopener\">https://tailkits.com/</a><br />5. tailkits: <a target=\"_blank\" href=\"https://tailkits.com/\" rel=\"nofollow noopener\">https://tailkits.com/</a><br />6. TW Elements: <a target=\"_blank\" href=\"https://tw-elements.com/\" rel=\"nofollow noopener\">https://tw-elements.com/</a><br /><br />\u5e26\u7f16\u8f91\u5668\u7684\uff1a<br />1. Flowbite: <a target=\"_blank\" href=\"https://flowbite.com/\" rel=\"nofollow noopener\">https://flowbite.com/</a><br />2. Shuffle for Tailwind: https://tailwind.build/<br />3. Easy Frontend: <a target=\"_blank\" href=\"https://easyfrontend.com/\" rel=\"nofollow noopener\">https://easyfrontend.com/</a>", 
      "date_published": "2024-05-16T08:12:03+00:00", 
      "title": "\u53ef\u80fd\u662f\u6700\u5168\u7684\u514d\u8d39 Tailwind CSS Component \u5408\u96c6", 
      "id": "https://www.v2ex.com/t/1041367"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/mangojiji", 
        "name": "mangojiji", 
        "avatar": "https://cdn.v2ex.com/avatar/a123/d26a/662199_large.png?m=1729157569"
      }, 
      "url": "https://www.v2ex.com/t/1040379", 
      "date_modified": "2024-05-13T11:54:55+00:00", 
      "content_html": "<p>\u4ee3\u7801\uff1a\n<a href=\"https://codepen.io/b1ghawk/pen/xxNbMwR\" rel=\"nofollow\">https://codepen.io/b1ghawk/pen/xxNbMwR</a></p>\n<p><img alt=\"Imgur\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://i.imgur.com/iKwQ3aV.png\"/></p>\n<p>\u60f3\u8981\u5b9e\u73b0\u8fd9\u6837\u7684\u6548\u679c\uff1a</p>\n<p><img alt=\"pic2\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://i.imgur.com/Sx181vD.png\"/></p>\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": "https://www.v2ex.com/t/1040379"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/b1t", 
        "name": "b1t", 
        "avatar": "https://cdn.v2ex.com/avatar/ff92/1b83/551106_large.png?m=1764643628"
      }, 
      "url": "https://www.v2ex.com/t/1038997", 
      "date_modified": "2024-05-09T03:52:27+00:00", 
      "content_html": "<p>\u5728\u5b66\u524d\u7aef\uff0c\u770b\u4e86 React \u3001Nextjs  </p>\n<p>\u53c8\u8fb9\u770b Tailwind CSS \u7684\u6587\u6863\u8fb9\u5199\u70b9\u4e1c\u897f</p>\n<p>\u4f46\u662f css \u662f\u6765\u56de\u8c03\u8bd5\uff0c\u7ecf\u5e38\u4e0d\u751f\u6548\uff0c\u6216\u8005\u4f4d\u7f6e\u5947\u5947\u602a\u602a</p>\n<p>css \u6709\u4ec0\u4e48\u56fa\u5b9a\u5957\u8def\u53ef\u4ee5\u7528\u5417\uff1f<br/>\n\u4f60\u4eec\u600e\u4e48\u5ea6\u8fc7\u7684\u8fd9\u4e2a\u9636\u6bb5\uff1f</p>\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": "https://www.v2ex.com/t/1038997"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/hzdt", 
        "name": "hzdt", 
        "avatar": "https://cdn.v2ex.com/gravatar/6309548f9dab55dd7ae8e802cbe46fa6?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/1035921", 
      "title": "\u6709\u4ec0\u4e48\u5b9e\u6218\u5b66\u4e60 css \u7684\u6559\u7a0b?", 
      "id": "https://www.v2ex.com/t/1035921", 
      "date_published": "2024-04-26T07:14:10+00:00", 
      "content_html": "<p>\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~</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/asuraa", 
        "name": "asuraa", 
        "avatar": "https://cdn.v2ex.com/gravatar/b737b444b9f6608b941fefd01fd854f1?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/1030955", 
      "title": "\u540e\u7aef\u7a0b\u5e8f\u5458\u5982\u4f55\u5b66\u4e60 css", 
      "id": "https://www.v2ex.com/t/1030955", 
      "date_published": "2024-04-09T05:45:34+00:00", 
      "content_html": "\u611f\u89c9\u8fd9\u73a9\u610f\u592a\u96be\u4e86\u3002<br />\u6ca1\u6709\u90a3\u79cd\u6307\u54ea\u6253\u54ea\u7684\u611f\u89c9\u3002<br />\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<br />\u90a3\u4e48\u540e\u7aef\u7a0b\u5e8f\u5458\u5982\u4f55\u5feb\u901f\u5165\u95e8 css \uff1f \u5feb\u901f\u5b66\u4e60\u5e03\u5c40"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/wukongkong", 
        "name": "wukongkong", 
        "avatar": "https://cdn.v2ex.com/gravatar/7be693f225fdae985abcd80c04a028a4?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/1029243", 
      "title": "unocss \u5982\u4f55\u4fee\u6539\u9ed8\u8ba4 8 \u7684\u500d\u6570", 
      "id": "https://www.v2ex.com/t/1029243", 
      "date_published": "2024-04-02T12:12:31+00:00", 
      "content_html": "<p>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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/meeop", 
        "name": "meeop", 
        "avatar": "https://cdn.v2ex.com/avatar/8f89/5180/450566_large.png?m=1774239808"
      }, 
      "url": "https://www.v2ex.com/t/1013832", 
      "date_modified": "2024-02-03T11:47:22+00:00", 
      "content_html": "<p>\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</p>\n<p>\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</p>\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": "https://www.v2ex.com/t/1013832"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/Rebron1900", 
        "name": "Rebron1900", 
        "avatar": "https://cdn.v2ex.com/gravatar/cc38267b10cc25dfc62209f8ca34589e?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/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 <a target=\"_blank\" href=\"https://bigfa.github.io/\" rel=\"nofollow noopener\">https://bigfa.github.io/</a> \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": "https://www.v2ex.com/t/1005119"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/isajdhs", 
        "name": "isajdhs", 
        "avatar": "https://cdn.v2ex.com/gravatar/5bc88da7c02e631497f06a68880a21a6?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/998967", 
      "title": "\u8fd9\u4e2a\u7f51\u7ad9\u80cc\u666f\u6e10\u53d8\u6548\u679c\u600e\u4e48\u5b9e\u73b0\u7684\uff1f", 
      "id": "https://www.v2ex.com/t/998967", 
      "date_published": "2023-12-09T09:24:11+00:00", 
      "content_html": "<p>\u5730\u5740\uff1a <a href=\"https://imagine.meta.com/\" rel=\"nofollow\">https://imagine.meta.com/</a></p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/mfsw", 
        "name": "mfsw", 
        "avatar": "https://cdn.v2ex.com/gravatar/68e3b6f0b2a879ac73343505290598e5?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/989137", 
      "title": "\u8bf7\u6559\u4e0b\u5a92\u4f53\u67e5\u8be2\u7684\u95ee\u9898.", 
      "id": "https://www.v2ex.com/t/989137", 
      "date_published": "2023-11-06T07:31:38+00:00", 
      "content_html": "<p>\u6211\u7684\u811a\u672c\u91cc\u9762\u6709\u4e00\u6761\u9ed8\u8ba4\u7684 css\n.textanniu {\nfont-size: 50px;\n}</p>\n<p>\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.</p>\n<p>@<a href=\"/member/media\">media</a> screen and (max-width: 1280px) {\n.textanniu {\nfont-size: 30px;\n}\n}</p>\n<p>@<a href=\"/member/media\">media</a> (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: <meta content=\"width=1290\" name=\"viewport\"/></p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/mfsw", 
        "name": "mfsw", 
        "avatar": "https://cdn.v2ex.com/gravatar/68e3b6f0b2a879ac73343505290598e5?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/986548", 
      "title": "\u6709\u5927\u4f6c\u63a5\u5355\u5417?\u5e2e\u5fd9\u4f18\u5316\u4e0b\u624b\u673a\u7aef\u7684 css,200rmb", 
      "id": "https://www.v2ex.com/t/986548", 
      "date_published": "2023-10-29T18:54:16+00:00", 
      "content_html": "<p>\u5982\u9898,\u5c31\u4e00\u4e2a\u7f51\u9875.\u5e2e\u6211\u505a\u597d\u9488\u5bf9\u4e0d\u540c\u5c4f\u5e55\u7684\u4f18\u5316\u5373\u53ef.\nvx: MTU2Njg5MTk3OTY=</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/NoraProgrmming", 
        "name": "NoraProgrmming", 
        "avatar": "https://cdn.v2ex.com/avatar/64a6/afac/592807_large.png?m=1699166490"
      }, 
      "url": "https://www.v2ex.com/t/985598", 
      "date_modified": "2023-10-26T03:35:36+00:00", 
      "content_html": "<a target=\"_blank\" href=\"https://www.ptt.cc/bbs/index.html\" rel=\"nofollow noopener\">https://www.ptt.cc/bbs/index.html</a><br />\u539f\u7f51\u5740\u5728\u8fd9\u91cc<br /><br />\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<br /><br />\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<br /><br />body {<br />  background-color: #f5f5f5;<br />  color: #333333;<br />  font-family: \"PingFang SC\", \"Microsoft YaHei\"; <br />  font-size: 18px;<br />  line-height: 1.6;<br />  letter-spacing: 1px;<br />  word-spacing: 4px; <br />}<br /><br />a {<br />  color: #0066cc;<br />}<br /><br />img {<br />  max-width: 100%;<br />  height: auto;<br />}", 
      "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": "https://www.v2ex.com/t/985598"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/overdev", 
        "name": "overdev", 
        "avatar": "https://cdn.v2ex.com/avatar/fe36/0311/629026_large.png?m=1684133724"
      }, 
      "url": "https://www.v2ex.com/t/979436", 
      "date_modified": "2023-10-08T00:28:52+00:00", 
      "content_html": "<p>\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 <img alt=\"\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://i.imgur.com/7rIGJRj.png\"/> </p>\n<pre><code>&lt;script setup lang=\"ts\"&gt;\nimport { onMounted } from 'vue'\nimport Konva from 'konva';\nconst konvaInit = () =&gt; {\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&lt;/script&gt;\n\n&lt;template&gt;\n  &lt;div class=\"test\"&gt;\n    test text\n  &lt;/div&gt;\n  &lt;div class=\"test2\"&gt;\n    test text\n  &lt;/div&gt;\n  &lt;div id=\"target\" class=\"text3\"&gt;&lt;/div&gt;\n&lt;/template&gt;\n\n&lt;style scoped&gt;\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&lt;/style&gt;\n\n</code></pre>\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": "https://www.v2ex.com/t/979436"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/wdssmq", 
        "name": "wdssmq", 
        "avatar": "https://cdn.v2ex.com/avatar/6632/34db/85366_large.png?m=1638374341"
      }, 
      "url": "https://www.v2ex.com/t/978261", 
      "title": "\u884c\u5185\u5143\u7d20\u7684 padding \u8868\u73b0\u95ee\u9898", 
      "id": "https://www.v2ex.com/t/978261", 
      "date_published": "2023-09-30T03:56:24+00:00", 
      "content_html": "<p>\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\n<a href=\"https://tieba.baidu.com/p/8625827524\" rel=\"nofollow\">https://tieba.baidu.com/p/8625827524</a></p>\n<p>\u8d34\u5427\u770b\u5230\u7684\uff0c\u4e0b\u8fb9\u662f\u6211\u7684\u56de\u590d\uff1a</p>\n<p>\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>\n<p>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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/daiwenzh5", 
        "name": "daiwenzh5", 
        "avatar": "https://cdn.v2ex.com/avatar/622b/f22c/306312_large.png?m=1722995591"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/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<br />\u5e03\u5c40\u7c7b\u578b\u4e8e<br />```text<br />1    2    3    \u5220\u9664<br />4    5    6    \u786e\u5b9a<br />7    8    9    \u786e\u5b9a<br />.    0    \u6e05\u96f6 \u786e\u5b9a<br />```<br />\u5176\u4e2d\u201c\u786e\u5b9a\u201d\u952e\u7eb5\u5411\u5408\u5e76\uff0c\u8981\u6c42\u81ea\u9002\u5e94\u3002<br />\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<br />\u53c2\u8003\uff1a <a target=\"_blank\" href=\"https://codepen.io/daiwenzh5/pen/JjegqWK\" rel=\"nofollow noopener\">https://codepen.io/daiwenzh5/pen/JjegqWK</a><br /><br />\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": "https://www.v2ex.com/member/atfeel", 
        "name": "atfeel", 
        "avatar": "https://cdn.v2ex.com/gravatar/05e880c3ebdb8f94dcc25fa1ead531c4?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/948766", 
      "title": "\u8c01\u77e5\u9053\u5982\u4f55\u4f7f\u7528 css\uff0c\u5b9e\u73b0\u8fd9\u6837\u7684\u4e0b\u5706\u5f27\u6548\u679c\uff1f", 
      "id": "https://www.v2ex.com/t/948766", 
      "date_published": "2023-06-14T11:49:29+00:00", 
      "content_html": "<p><img alt=\"\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://i.imgur.com/pAt5H6g.jpeg\"/>\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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/LandCruiser", 
        "name": "LandCruiser", 
        "avatar": "https://cdn.v2ex.com/gravatar/c2b01e216c511f784611f5cd4525cd1e?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/944583", 
      "title": "\u8bf7\u6559\u4e00\u4e2a\u548c border \u6709\u5173\u7684 CSS \u6837\u5f0f\u7684\u95ee\u9898", 
      "id": "https://www.v2ex.com/t/944583", 
      "date_published": "2023-05-31T08:36:38+00:00", 
      "content_html": "<p>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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/he2020", 
        "name": "he2020", 
        "avatar": "https://cdn.v2ex.com/avatar/4398/e65d/504539_large.png?m=1660734656"
      }, 
      "url": "https://www.v2ex.com/t/939641", 
      "title": "\u5982\u4f55\u89e3\u91ca vertical-align \u7684\u8fd9\u4e2a\u73b0\u8c61\uff1f", 
      "id": "https://www.v2ex.com/t/939641", 
      "date_published": "2023-05-12T15:01:06+00:00", 
      "content_html": "<pre><code>\u8fd0\u884c\u5730\u5740\uff1a https://jsbin.com/mipexucegi/edit?html,css,output\n</code></pre>\n<p><img alt=\"vertical-align.jpg\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://s2.loli.net/2023/05/12/V2aX3ASEMgZKiUT.jpg\"/></p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/linuxsteam", 
        "name": "linuxsteam", 
        "avatar": "https://cdn.v2ex.com/avatar/7da0/eda5/257481_large.png?m=1639019209"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/927614", 
      "date_published": "2023-03-27T09:55:16+00:00", 
      "content_html": "<p>\u5982\u9898\uff0c\u5c0f\u5f1f\u521a\u5b66\u524d\u7aef CSS\n\u95ee\u9898\u5982\u56fe\n<img alt=\"20230327_174749_w7r1xLQGxB.png\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://s2.232232.xyz/static/422/2023/03/27-64216838113cf.png\"/>\n\u7f51\u7ad9 <a href=\"https://wfion.com\" rel=\"nofollow\">https://wfion.com</a></p>\n<p>\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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/wuyuchenshr", 
        "name": "wuyuchenshr", 
        "avatar": "https://cdn.v2ex.com/gravatar/b2366dbb7d76bdfe9d4c62f83c1af777?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/921881", 
      "title": "CSS \u9009\u62e9\u5668\u5982\u4f55\u7b5b\u9009\u540c\u7ea7\u7684\u7b2c\u4e00\u4e2a\u8282\u70b9\u3002[ Python ]", 
      "id": "https://www.v2ex.com/t/921881", 
      "date_published": "2023-03-07T05:37:19+00:00", 
      "content_html": "<p>\u7f51\u9875\u7ed3\u6784\u5982\u4e0b</p>\n<a href=\"index.php?haha;hit=1\" rel=\"nofollow\" title=\"\u6211\u662f\u6807\u9898\"><b>\u6211\u662f\u6807\u9898</b> </a>\n<img alt=\"\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"image-1.jpg\"/>\n<a href=\"#\" rel=\"nofollow\">\u94fe\u63a5 2</a>\n<a href=\"#\" rel=\"nofollow\">\u94fe\u63a5 3</a>\n<p>\u5176\u4e2d img class=\"pro_free \u662f\u56fa\u5b9a\u7684\uff0c\u6211\u7684\u9700\u6c42\u662f\u7b5b\u9009\u51fa<a href=\"#\" rel=\"nofollow\">\u94fe\u63a5 1</a>\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</p>\n<p>\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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/taisenjay245", 
        "name": "taisenjay245", 
        "avatar": "https://cdn.v2ex.com/gravatar/ad84cc956946917d7c354cd6b273ea50?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/909949", 
      "date_published": "2023-01-19T12:28:30+00:00", 
      "content_html": "<p>\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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/woshichuanqilz", 
        "name": "woshichuanqilz", 
        "avatar": "https://cdn.v2ex.com/avatar/2c38/70c1/139700_large.png?m=1681181757"
      }, 
      "url": "https://www.v2ex.com/t/904803", 
      "date_modified": "2022-12-26T11:03:09+00:00", 
      "content_html": "<p>\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</p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;title&gt;Title&lt;/title&gt;\n    &lt;style&gt;\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    &lt;/style&gt;\n\n&lt;/head&gt;\n&lt;body&gt;\n    &lt;div class=\"square\"&gt;&lt;/div&gt;\n    &lt;p class=\"text\"&gt;love&lt;/p&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\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": "https://www.v2ex.com/t/904803"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/he2020", 
        "name": "he2020", 
        "avatar": "https://cdn.v2ex.com/avatar/4398/e65d/504539_large.png?m=1660734656"
      }, 
      "url": "https://www.v2ex.com/t/902570", 
      "date_modified": "2022-12-14T14:42:43+00:00", 
      "content_html": "<p>\u901a\u5e38\u662f\u8fd9\u4e48\u7528\u7684\uff1a</p>\n<pre><code>.fa-camera-retro:before {\n  content: \"\\f083\";\n}\n\n&lt;p&gt;\n  &lt;i class=\"fa fa-camera-retro\"&gt;&lt;/i&gt;\n  &lt;span&gt;fa-camera-retro&lt;/span&gt;\n&lt;/p&gt;\n</code></pre>\n<p>\u4e3a\u4ec0\u4e48\u4e0d\u8bbe\u8ba1\u6210\u4e0b\u9762\u8fd9\u4e48\u7528\uff1a</p>\n<pre><code>&lt;p&gt;\n  &lt;i&gt;\\f083&lt;/i&gt;\n  &lt;span&gt;fa-camera-retro&lt;/span&gt;\n&lt;/p&gt;\n</code></pre>\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": "https://www.v2ex.com/t/902570"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/estk", 
        "name": "estk", 
        "avatar": "https://cdn.v2ex.com/avatar/12f5/d602/576589_large.png?m=1704726369"
      }, 
      "url": "https://www.v2ex.com/t/900423", 
      "title": "\u7f51\u9875\u7070\u8272\u7b80\u6d01\u4ee3\u7801", 
      "id": "https://www.v2ex.com/t/900423", 
      "date_published": "2022-12-06T02:37:56+00:00", 
      "content_html": "<p>Chrome Console \u8f93\u5165</p>\n<pre><code>const style=document.createElement('style');style.innerText='*{filter:grayscale(1)!important}';document.getElementsByTagName('head')[0].appendChild(style)\n</code></pre>\n<p>\u7136\u540e\u56de\u8f66</p>\n<p>grayscale(1) \u5168\u7070</p>\n<p>grayscale(0) \u5168\u5f69</p>\n<p><img alt=\"\" class=\"embedded_image\" loading=\"lazy\" referrerpolicy=\"no-referrer\" rel=\"noreferrer\" src=\"https://nftstorage.link/ipfs/bafybeibap6dze2uu7d7ozir23svu7pzuyrgj5eep5ougikwlecqxof7boe\"/></p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/snoopyhai", 
        "name": "snoopyhai", 
        "avatar": "https://cdn.v2ex.com/avatar/6953/aa78/23785_large.png?m=1663313106"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/899317", 
      "date_published": "2022-12-01T05:59:30+00:00", 
      "content_html": "<p>\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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/makelove", 
        "name": "makelove", 
        "avatar": "https://cdn.v2ex.com/avatar/d765/7583/1838_large.png?m=1645686279"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/897354", 
      "date_published": "2022-11-23T06:46:27+00:00", 
      "content_html": "<p>\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</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/humbass", 
        "name": "humbass", 
        "avatar": "https://cdn.v2ex.com/gravatar/167e7101a0d1f1af92baf53ad32ee4f4?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/889397", 
      "title": "\u5173\u4e8e\u4e3b\u9898\u5207\u6362\u7684\u7591\u95ee", 
      "id": "https://www.v2ex.com/t/889397", 
      "date_published": "2022-10-24T07:23:39+00:00", 
      "content_html": "<p>\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</p>\n<p>\u73b0\u5728 MacOS \u7684 Light, Dark \u8fd9\u6837\u7684\u4e3b\u9898\uff0c\u4e5f\u662f\u9700\u8981\u5199\u4e24\u5957\u5417\uff1f</p>\n"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/tmo", 
        "name": "tmo", 
        "avatar": "https://cdn.v2ex.com/gravatar/d3acca912e67716a54a369484385a8a9?s=73&d=retro"
      }, 
      "url": "https://www.v2ex.com/t/888551", 
      "date_modified": "2022-10-20T14:29:57+00:00", 
      "content_html": "<p>\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</p>\n<p>\u4f8b\u5982\u5c0f\u7c73\u7f51\u7ad9\u7684 misans\uff1a <a href=\"https://font.sec.miui.com/font/css?family=MiSans:300,450,500,650,800:Chinese_Simplify,Latin&amp;display=swap\" rel=\"nofollow\">https://font.sec.miui.com/font/css?family=MiSans:300,450,500,650,800:Chinese_Simplify,Latin&amp;display=swap</a></p>\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": "https://www.v2ex.com/t/888551"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/monster1priest", 
        "name": "monster1priest", 
        "avatar": "https://cdn.v2ex.com/avatar/115e/8f70/543764_large.png?m=1726380524"
      }, 
      "url": "https://www.v2ex.com/t/883275", 
      "title": "\u5982\u4f55\u68c0\u67e5\u4e0d\u540c\u6d4f\u89c8\u5668\u5bf9 CSS \u7684\u517c\u5bb9\u6027\u652f\u6301\uff1f", 
      "id": "https://www.v2ex.com/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  <br />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": "https://www.v2ex.com/member/Livid", 
        "name": "Livid", 
        "avatar": "https://cdn.v2ex.com/avatar/c4ca/4238/1_large.png?m=1775624785"
      }, 
      "url": "https://www.v2ex.com/t/872617", 
      "date_modified": "2022-08-13T06:50:08+00:00", 
      "content_html": "<a target=\"_blank\" href=\"/i/sPTGCXRD.png\" rel=\"nofollow noopener\" target=\"_blank\" title=\"\u5728\u65b0\u7a97\u53e3\u6253\u5f00\u56fe\u7247 sPTGCXRD.png\"><img src=\"//i.v2ex.co/sPTGCXRD.png\" class=\"embedded_image\"></a><br /><br /><a target=\"_blank\" href=\"https://github.com/sakofchit/system.css\" rel=\"nofollow noopener\">https://github.com/sakofchit/system.css</a>", 
      "date_published": "2022-08-13T06:49:39+00:00", 
      "title": "System.css", 
      "id": "https://www.v2ex.com/t/872617"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/CoolSpring", 
        "name": "CoolSpring", 
        "avatar": "https://cdn.v2ex.com/avatar/7af2/0bb1/67329_large.png?m=1659247726"
      }, 
      "url": "https://www.v2ex.com/t/869771", 
      "date_modified": "2022-07-31T06:24:18+00:00", 
      "content_html": "\u80cc\u666f\uff1a<br />\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<br /><br />\u8bbe\u60f3\u7684\u5de5\u4f5c\u6d41\uff1a<br />\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<br /><br />\u6982\u62ec\u9700\u6c42\uff1a<br />\u60f3\u4e00\u4e2a\u82f1\u6587\u5ba3\u4f20\u8bed\u5c31\u662f\uff1aWrite in \"Atomic CSS\" way, convert to nested CSS before you commit.<br />\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<br /><br />\u76f8\u4f3c\u4f46\u4e0d\u592a\u4e00\u6837\u7684\u65b9\u6848\uff1a<br />1. \u4e86\u89e3\u5230 Windi CSS \u6709\u4e00\u4e2a Compilation Mode <a target=\"_blank\" href=\"https://windicss.org/posts/modes.html#compilation-mode\" rel=\"nofollow noopener\">https://windicss.org/posts/modes.html#compilation-mode</a> \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<br />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": "https://www.v2ex.com/t/869771"
    }, 
    {
      "author": {
        "url": "https://www.v2ex.com/member/dufu1991", 
        "name": "dufu1991", 
        "avatar": "https://cdn.v2ex.com/avatar/93d1/bf6f/379730_large.png?m=1774861227"
      }, 
      "url": "https://www.v2ex.com/t/865394", 
      "title": "\u8bf7\u6559\u5927\u4f6c\u4e00\u4e2a\u524d\u7aef\u5f00\u53d1\u7684\u95ee\u9898\u3002", 
      "id": "https://www.v2ex.com/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": "https://www.v2ex.com/member/frozenway", 
        "name": "frozenway", 
        "avatar": "https://cdn.v2ex.com/avatar/c684/ffbb/226009_large.png?m=1644474092"
      }, 
      "url": "https://www.v2ex.com/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": "https://www.v2ex.com/t/864250", 
      "date_published": "2022-07-05T09:08:53+00:00", 
      "content_html": "<p>\u89c6\u9891\u7f51\u5740 <a href=\"https://v2.h5player.bytedance.com/examples/\" rel=\"nofollow\">https://v2.h5player.bytedance.com/examples/</a></p>\n"
    }
  ]
}