{"id":12312,"date":"2026-07-23T15:39:57","date_gmt":"2026-07-23T07:39:57","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=12312"},"modified":"2026-07-23T15:39:57","modified_gmt":"2026-07-23T07:39:57","slug":"css-custom-repeat-function","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2026\/07\/css-custom-repeat-function\/","title":{"rendered":"\u7eafCSS\u5b9e\u73b0repeat(&#8211;n, anything)\u5faa\u73af\u5c55\u793a\u6216\u76f8\u52a0\u529f\u80fd"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=12312\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=12312<\/a><br \/>\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4f46\u9700\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\uff0cAI\u6293\u53d6\u4fdd\u7559\u539f\u6587\u5730\u5740\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<\/p>\n<h3>\u4e00\u3001\u795e\u5947\u6548\u679c\u62a2\u5148\u770b<\/h3>\n<p>\u53bb\u5e749\u6708\u6709\u4ecb\u7ecd\u8fc7<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2025\/09\/css-function-at-rules\/\">CSS @function\u81ea\u5b9a\u4e49\u51fd\u6570<\/a>\uff0c\u90a3\u4e48\u6709\u6ca1\u6709\u53ef\u80fd\u81ea\u5b9a\u4e49\u4e00\u4e2a\u540d\u4e3a<code>repeat(--n, anything)<\/code>\u7684\u51fd\u6570\uff0c\u5b9e\u73b0\u5b57\u7b26\u5faa\u73af\u62fc\u63a5\u6216\u8005\u6570\u503c\u76f8\u52a0\u7684\u529f\u80fd\u5462\uff1f<\/p>\n<p>\u8fd8\u771f\u53ef\u4ee5\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;div class=\"target\"&gt;&lt;\/div&gt;<\/pre>\n<pre>@function --repeat(--n, --x) {\r\n  \/* \u7565 *\/\r\n}\r\n\r\n.target:before {\r\n  --repeat-demo: calc(0 --repeat(16, + 10));\r\n\r\n  width: calc(var(--repeat-demo) * 1px);\r\n\r\n  counter-reset: result var(--repeat-demo);\r\n  content: counter(result) \"px\" --repeat(3, \" \ud83d\udc7d\");\r\n\r\n  display: block;\r\n  line-height: 30px;\r\n  background: deepskyblue;\r\n}<\/pre>\n<p>\u6b64\u65f6\uff0c\u53ef\u4ee5\u770b\u5230\uff0c\u5c3a\u5bf8\u7684160px\u751f\u6548\u4e86\uff0c<code>result<\/code>\u8ba1\u6570\u5668\u7684\u6570\u503c\u4e5f\u751f\u6548\u4e86\uff0c\u4ee5\u53ca<code>--repeat(3, \" \ud83d\udc7d\")<\/code>\u7684\u5b57\u7b26\u4e32\u62fc\u63a5\u4e5f\u751f\u6548\u4e86\u3002<\/p>\n<p>\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202607\/2026-7-23_112500.png\" width=\"324\" height=\"64\" alt=\"repeat\u6548\u679c\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202607\/css-custom-repeat-function.php\" rel=\"noopener\" target=\"_blank\">CSS\u81ea\u5b9a\u4e49\u4efb\u610f\u53ef\u91cd\u590d\u53ef\u76f8\u52a0\u51fd\u6570demo<\/a><\/p>\n<p>\u6240\u4ee5\uff0c<code>@function --repeat(--n, --x)<\/code>\u8fd9\u4e2a\u81ea\u5b9a\u4e49\u51fd\u6570\u91cc\u9762\u7a76\u7adf\u662f\u600e\u4e48\u8bbe\u7f6e\u7684\uff0c\u5c45\u7136\u53ef\u4ee5\u6709\u8fd9\u6837\u7684\u6548\u679c\u5462\uff1f<\/p>\n<h3>\u4e8c\u3001\u89e3\u5bc6&#8211;repate()\u51fd\u6570\u4ee3\u7801<\/h3>\n<p>\u6b64\u81ea\u5b9a\u4e49CSS\u51fd\u6570\u4ee3\u7801\u662f\u56fa\u5b9a\u7684\uff0c\u7c98\u8d34\u5373\u53ef\u4f7f\u7528\uff1a<\/p>\n<pre>@function --repeat(--n, --x) {\r\n  --bit7: calc(round(down, var(--n) \/ 128));\r\n  --val6: calc(var(--n) - var(--bit7) * 128);\r\n\r\n  --bit6: calc(round(down, var(--val6) \/ 64));\r\n  --val5: calc(var(--val6) - var(--bit6) * 64);\r\n\r\n  --bit5: calc(round(down, var(--val5) \/ 32));\r\n  --val4: calc(var(--val5) - var(--bit5) * 32);\r\n\r\n  --bit4: calc(round(down, var(--val4) \/ 16));\r\n  --val3: calc(var(--val4) - var(--bit4) * 16);\r\n\r\n  --bit3: calc(round(down, var(--val3) \/ 8));\r\n  --val2: calc(var(--val3) - var(--bit3) * 8);\r\n\r\n  --bit2: calc(round(down, var(--val2) \/ 4));\r\n  --val1: calc(var(--val2) - var(--bit2) * 4);\r\n\r\n  --bit1: calc(round(down, var(--val1) \/ 2));\r\n  --bit0: calc(var(--val1) - var(--bit1) * 2);\r\n \r\n  --pow0: var(--x);\r\n  --pow1: var(--pow0) var(--pow0);\r\n  --pow2: var(--pow1) var(--pow1);\r\n  --pow3: var(--pow2) var(--pow2);\r\n  --pow4: var(--pow3) var(--pow3);\r\n  --pow5: var(--pow4) var(--pow4);\r\n  --pow6: var(--pow5) var(--pow5);\r\n  --pow7: var(--pow6) var(--pow6);\r\n\r\n  result: if(style(--bit0 = 1): var(--pow0); else: ;)\r\n    if(style(--bit1 = 1): var(--pow1); else: ;)\r\n    if(style(--bit2 = 1): var(--pow2); else: ;)\r\n    if(style(--bit3 = 1): var(--pow3); else: ;)\r\n    if(style(--bit4 = 1): var(--pow4); else: ;)\r\n    if(style(--bit5 = 1): var(--pow5); else: ;)\r\n    if(style(--bit6 = 1): var(--pow6); else: ;)\r\n    if(style(--bit7 = 1): var(--pow7); else: ;);\r\n}<\/pre>\n<p>\u6216\u8005\u76f4\u63a5<code>@import<\/code>\u5728\u7ebf\u7684CSS\u5730\u5740\u3002<\/p>\n<pre>@import url(\"https:\/\/unpkg.com\/@propjockey\/doubledash.css@0.0.2\/functions\/repeat.css\");<\/pre>\n<h4>\u6848\u4f8b<\/h4>\n<p><strong>1. \u5b57\u7b26\u4e32\u5faa\u73af\u62fc\u63a5<\/strong><\/p>\n<pre>@import url(\".\/repeat.css\");\r\n\r\nbody::before {\r\n  content: --repeat(7, \"\ud83d\ude02 \");\r\n}<\/pre>\n<style>@function --repeat(--n, --x) {--bit7: calc(round(down, var(--n) \/ 128));--val6: calc(var(--n) - var(--bit7) * 128);--bit6: calc(round(down, var(--val6) \/ 64));--val5: calc(var(--val6) - var(--bit6) * 64);--bit5: calc(round(down, var(--val5) \/ 32));--val4: calc(var(--val5) - var(--bit5) * 32);--bit4: calc(round(down, var(--val4) \/ 16));--val3: calc(var(--val4) - var(--bit4) * 16);--bit3: calc(round(down, var(--val3) \/ 8));--val2: calc(var(--val3) - var(--bit3) * 8);--bit2: calc(round(down, var(--val2) \/ 4));--val1: calc(var(--val2) - var(--bit2) * 4);--bit1: calc(round(down, var(--val1) \/ 2));--bit0: calc(var(--val1) - var(--bit1) * 2);--pow0: var(--x);--pow1: var(--pow0) var(--pow0);--pow2: var(--pow1) var(--pow1);--pow3: var(--pow2) var(--pow2);--pow4: var(--pow3) var(--pow3);--pow5: var(--pow4) var(--pow4);--pow6: var(--pow5) var(--pow5);--pow7: var(--pow6) var(--pow6);result: if(style(--bit0 = 1): var(--pow0); else: ;)if(style(--bit1 = 1): var(--pow1); else: ;)if(style(--bit2 = 1): var(--pow2); else: ;)if(style(--bit3 = 1): var(--pow3); else: ;)if(style(--bit4 = 1): var(--pow4); else: ;)if(style(--bit5 = 1): var(--pow5); else: ;)if(style(--bit6 = 1): var(--pow6); else: ;)if(style(--bit7 = 1): var(--pow7); else: ;);}@function --repeat-join(--n, --join, --x) {--bit7: calc(round(down, (var(--n) - 1) \/ 128));--val6: calc(var(--n) - 1 - var(--bit7) * 128);--bit6: calc(round(down, var(--val6) \/ 64));--val5: calc(var(--val6) - var(--bit6) * 64);--bit5: calc(round(down, var(--val5) \/ 32));--val4: calc(var(--val5) - var(--bit5) * 32);--bit4: calc(round(down, var(--val4) \/ 16));--val3: calc(var(--val4) - var(--bit4) * 16);--bit3: calc(round(down, var(--val3) \/ 8));--val2: calc(var(--val3) - var(--bit3) * 8);--bit2: calc(round(down, var(--val2) \/ 4));--val1: calc(var(--val2) - var(--bit2) * 4);--bit1: calc(round(down, var(--val1) \/ 2));--bit0: calc(var(--val1) - var(--bit1) * 2);--pow0: var(--join) var(--x);--pow1: var(--pow0) var(--pow0);--pow2: var(--pow1) var(--pow1);--pow3: var(--pow2) var(--pow2);--pow4: var(--pow3) var(--pow3);--pow5: var(--pow4) var(--pow4);--pow6: var(--pow5) var(--pow5);--pow7: var(--pow6) var(--pow6);result: var(--x)if(style(--bit0 = 1): var(--pow0); else: ;)if(style(--bit1 = 1): var(--pow1); else: ;)if(style(--bit2 = 1): var(--pow2); else: ;)if(style(--bit3 = 1): var(--pow3); else: ;)if(style(--bit4 = 1): var(--pow4); else: ;)if(style(--bit5 = 1): var(--pow5); else: ;)if(style(--bit6 = 1): var(--pow6); else: ;)if(style(--bit7 = 1): var(--pow7); else: ;);}\n.tt1::before {content: --repeat(7, \"\ud83d\ude02 \");}\n.tt2::before {content: --repeat(7, \"CSS\u65b0\u4e16\u754c \ud83d\udcda \");text-shadow: --repeat-join(4, {, }, 0px 0px 2px deeppink);}\n.tt3::before {content: --repeat(3, \"CSS\u65b0\u4e16\u754c \ud83d\udcda \");filter: --repeat(4,drop-shadow(1px 1px deeppink));font-weight: bold;color: white;font-family: system-ui;}\n.tt4::before {content: --repeat(3, \"HTML\u5e76\u4e0d\u7b80\u5355 \ud83d\udcda \");display: inline-block;border-shape: shape(from 0 30px,--repeat-join(255, {,}, {line by 5px -6px, line by 5px 6px}));height: 36px;border: 1px solid deeppink;clip-path: inset(0px);}<\/style>\n<p>\u5b9e\u65f6\u6e32\u67d3\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<div style=\"padding:12px;background:#f5f5f5;\" class=\"tt1\"><\/div>\n<p><strong>2. text-shadow\u6587\u5b57\u9634\u5f71<\/strong><\/p>\n<pre>@import url(\"https:\/\/unpkg.com\/@propjockey\/doubledash.css@0.0.2\/functions\/repeat.css\");\r\n@import url(\"https:\/\/unpkg.com\/@propjockey\/doubledash.css@0.0.2\/functions\/repeat-join.css\");\r\n\r\nbody::before {\r\n  content: --repeat(7, \"CSS\u65b0\u4e16\u754c \ud83d\udcda \");\r\n  text-shadow: --repeat-join(4, {, }, 0px 0px 2px deeppink);\r\n}<\/pre>\n<p>\u5b9e\u65f6\u6e32\u67d3\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<div style=\"padding:12px;background:#f5f5f5;\" class=\"tt2\"><\/div>\n<p><strong>3. \u4f7f\u7528drop-shadow()\u6ee4\u955c\u4ee3\u66ff<\/strong><\/p>\n<pre>@import url(\".\/repeat.css\");\r\n\r\nbody::before {\r\n  content: --repeat(3, \"CSS\u65b0\u4e16\u754c \ud83d\udcda \");\r\n  filter: --repeat(4,\r\n    drop-shadow(1px 1px deeppink)\r\n  );\r\n  font-weight: bold;\r\n  color: white;\r\n  font-family: system-ui;\r\n}<\/pre>\n<p>\u5b9e\u65f6\u6e32\u67d3\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<div style=\"padding:12px;background:#f5f5f5;\" class=\"tt3\"><\/div>\n<p><strong>4. \u5728shape()\u51fd\u6570\u4e2d\u4f7f\u7528repeat<\/strong><\/p>\n<pre>@import url(\"repeat.css\");\r\n@import url(\"repeat-join.css\");\r\n\r\nbody::before {\r\n  content: --repeat(3, \"HTML\u5e76\u4e0d\u7b80\u5355 \ud83d\udcda \");\r\n  display: inline-block;\r\n\r\n  border-shape: shape(\r\n    from 0 30px,\r\n    --repeat-join(255, {,}, {line by 5px -6px, line by 5px 6px})\r\n  );\r\n\r\n  height: 36px;\r\n  border: 1px solid deeppink;\r\n  clip-path: inset(0px);\r\n}<\/pre>\n<p>\u5b9e\u65f6\u6e32\u67d3\u6548\u679c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<div style=\"padding:12px;background:#f5f5f5;\" class=\"tt4\"><\/div>\n<h3>\u4e8c\u3001\u539f\u7406\u8bf4\u660e<\/h3>\n<p>\u8fd9\u662f\u4e00\u4e2a\u975e\u5e38\u5de7\u5999\u7684 CSS <code>@function<\/code>\uff0c\u6838\u5fc3\u601d\u60f3\u662f<strong>\u7528\u4e8c\u8fdb\u5236\u5206\u89e3 + \u500d\u589e\uff08\u5feb\u901f\u5e42\u601d\u60f3\uff09\u6765\u5b9e\u73b0&#8221;\u91cd\u590d N \u6b21&#8221;<\/strong>\u3002\u4e0b\u9762\u62c6\u89e3\u539f\u7406\u3002<\/p>\n<h4>1. \u76ee\u6807<\/h4>\n<p><code>--repeat(--n, --x)<\/code> \u8981\u8fd4\u56de\uff1a\u628a <code>--x<\/code> \u8fd9\u4e2a token\uff08\u53ef\u4ee5\u662f\u5b57\u7b26\u4e32\u7247\u6bb5\u3001\u4e5f\u53ef\u4ee5\u662f\u67d0\u4e2a\u5c5e\u6027\u503c\u5355\u5143\uff09<strong>\u5e73\u94fa\u91cd\u590d <code>--n<\/code> \u6b21<\/strong>\uff0c\u4e2d\u95f4\u7528\u7a7a\u683c\u8fde\u63a5\u3002<\/p>\n<p>\u6bd4\u5982 <code>--repeat(5, a)<\/code> \u2192 <code>a a a a a<\/code>\uff085 \u4e2a a\uff09\u3002<\/p>\n<p>\u96be\u70b9\u5728\u4e8e\uff1aCSS \u6ca1\u6709\u5faa\u73af\uff0c\u65e0\u6cd5\u5199 <code>for (i=0; i&lt;n; i++)<\/code>\u3002\u4e8e\u662f\u4f5c\u8005\u7528\u4e86<strong>\u4e8c\u8fdb\u5236\u5c55\u5f00<\/strong>\u8fd9\u4e2a\u6570\u5b66\u6280\u5de7\u3002<\/p>\n<h4>2. \u7b2c\u4e00\u90e8\u5206\uff1a\u628a N \u62c6\u6210\u4e8c\u8fdb\u5236\u4f4d<\/h4>\n<pre>--bit7: calc(round(down, var(--n) \/ 128));\r\n--val6: calc(var(--n) - var(--bit7) * 128);\r\n--bit6: calc(round(down, var(--val6) \/ 64));\r\n...\r\n--bit0: calc(var(--val1) - var(--bit1) * 2);<\/pre>\n<p>\u8fd9\u6bb5\u5c31\u662f<strong>\u5341\u8fdb\u5236\u8f6c\u4e8c\u8fdb\u5236<\/strong>\u7684\u6807\u51c6&#8221;\u9010\u4f4d\u63d0\u53d6&#8221;\u7b97\u6cd5\u3002<code>round(down, \u2026)<\/code> \u662f\u5411\u4e0b\u53d6\u6574\uff08\u7b49\u4ef7\u4e8e <code>floor<\/code>\uff09\u3002<\/p>\n<p>\u4ee5 <code>--n = 5<\/code> \u4e3a\u4f8b\uff08\u4e8c\u8fdb\u5236 <code>00000101<\/code>\uff09\uff1a<\/p>\n<table class=\"params_table\">\n<thead>\n<tr>\n<th>\u6b65\u9aa4<\/th>\n<th>\u8ba1\u7b97<\/th>\n<th>\u7ed3\u679c<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>bit7<\/td>\n<td>floor(5\/128)<\/td>\n<td>0\uff0c\u4f59 5<\/td>\n<\/tr>\n<tr>\n<td>bit6<\/td>\n<td>floor(5\/64)<\/td>\n<td>0\uff0c\u4f59 5<\/td>\n<\/tr>\n<tr>\n<td>bit5<\/td>\n<td>floor(5\/32)<\/td>\n<td>0\uff0c\u4f59 5<\/td>\n<\/tr>\n<tr>\n<td>bit4<\/td>\n<td>floor(5\/16)<\/td>\n<td>0\uff0c\u4f59 5<\/td>\n<\/tr>\n<tr>\n<td>bit3<\/td>\n<td>floor(5\/8)<\/td>\n<td>0\uff0c\u4f59 5<\/td>\n<\/tr>\n<tr>\n<td>bit2<\/td>\n<td>floor(5\/4)<\/td>\n<td><strong>1<\/strong>\uff0c\u4f59 1<\/td>\n<\/tr>\n<tr>\n<td>bit1<\/td>\n<td>floor(1\/2)<\/td>\n<td>0\uff0c\u4f59 1<\/td>\n<\/tr>\n<tr>\n<td>bit0<\/td>\n<td>1 &#8211; 0<\/td>\n<td><strong>1<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u6240\u4ee5 <code>--bit2 = 1<\/code>\u3001<code>--bit0 = 1<\/code>\uff0c\u5176\u4f59\u4e3a 0 \u2192 \u5bf9\u5e94 <code>5 = 4 + 1 = 2\u00b2 + 2\u2070<\/code>\u3002<\/p>\n<p>\u7531\u4e8e\u53ea\u5230 <code>bit7<\/code>\uff08128\uff09\uff0c\u8fd9\u4e2a\u51fd\u6570\u652f\u6301\u7684\u6700\u5927 N \u662f <strong>255<\/strong>\uff08<code>2\u2078 - 1<\/code>\uff09\u3002<\/p>\n<h4>3. \u7b2c\u4e8c\u90e8\u5206\uff1a\u500d\u589e\u6784\u9020 2\u207f \u4e2a\u526f\u672c\uff08\u5feb\u901f\u5e42\uff09<\/h4>\n<pre>--pow0: var(--x);                  \/* 1 \u4e2a x   (2^0) *\/\r\n--pow1: var(--pow0) var(--pow0);   \/* 2 \u4e2a x   (2^1) *\/\r\n--pow2: var(--pow1) var(--pow1);   \/* 4 \u4e2a x   (2^2) *\/\r\n--pow3: var(--pow2) var(--pow2);   \/* 8 \u4e2a x   (2^3) *\/\r\n...\r\n--pow7: var(--pow6) var(--pow6);   \/* 128 \u4e2a x (2^7) *\/\r\n<\/pre>\n<p>\u8fd9\u662f\u5173\u952e\u7684\u500d\u589e\uff08doubling\uff09\u6280\u5de7\uff1a\u6bcf\u4e00\u7ea7\u90fd\u628a\u4e0a\u4e00\u7ea7\u7684\u5185\u5bb9\u62fc\u4e24\u904d\uff0c\u4e8e\u662f <code>--powK<\/code> \u6070\u597d\u5305\u542b <code>2^K<\/code> \u4e2a <code>--x<\/code>\uff0c\u7528\u7a7a\u683c\u5206\u9694\u3002<\/p>\n<p>\u6ce8\u610f\u8fd9\u91cc<strong>\u4e0d\u9700\u8981\u5faa\u73af\u4e5f\u4e0d\u9700\u8981\u6761\u4ef6<\/strong>\u2014\u2014\u7eaf\u7cb9\u9760\u53d8\u91cf\u81ea\u5f15\u7528\u7684\u5c42\u5c42\u5c55\u5f00\uff0c<code>--pow7<\/code> \u5c55\u5f00\u540e\u5c31\u662f\u5b9e\u5b9e\u5728\u5728\u7684 128 \u4e2a token \u5e76\u6392\u3002<\/p>\n<p>\u8fd9\u4e00\u6b65\u7c7b\u4f3c&#8221;\u751f\u6210 8 \u4e2a\u9884\u5236\u7684\u79ef\u6728\u5757\uff0c\u957f\u5ea6\u5206\u522b\u662f 1\u30012\u30014\u30018\u300116\u300132\u300164\u3001128&#8243;\u3002<\/p>\n<h4>4. \u7b2c\u4e09\u90e8\u5206\uff1a\u6309\u4e8c\u8fdb\u5236\u4f4d\u9009\u62e9\u6027\u62fc\u63a5<\/h4>\n<pre>result: if(style(--bit0 = 1): var(--pow0); else: ;)\r\n        if(style(--bit1 = 1): var(--pow1); else: ;)\r\n        ...\r\n        if(style(--bit7 = 1): var(--pow7); else: ;);\r\n<\/pre>\n<p><code>if(style(--bitK = 1): \u2026; else: ;)<\/code> \u662f\u65b0\u7684 CSS \u5185\u8054\u6761\u4ef6\uff08<code>if()<\/code> \u51fd\u6570 + <code>style()<\/code> \u67e5\u8be2\uff09\uff1a<\/p>\n<ul>\n<li>\u5982\u679c\u7b2c K \u4f4d\u662f 1\uff0c\u5c31\u53d6\u51fa\u5bf9\u5e94\u7684\u79ef\u6728\u5757 <code>--powK<\/code>\uff08\u542b <code>2^K<\/code> \u4e2a x\uff09\uff1b<\/li>\n<li>\u5426\u5219\u8f93\u51fa\u7a7a\uff08<code>else:<\/code> \u540e\u9762\u662f\u7a7a\u7684\uff09\u3002<\/li>\n<\/ul>\n<p>\u628a 8 \u4e2a\u6761\u4ef6\u7684\u7ed3\u679c<strong>\u9996\u5c3e\u76f8\u63a5<\/strong>\uff0c\u5c31\u5f97\u5230\u603b\u6570\u4e3a <code>\u03a3 (bitK \u00d7 2^K)<\/code> \u4e2a x \u2014\u2014 \u8fd9\u6b63\u597d\u7b49\u4e8e <code>--n<\/code>\u3002<\/p>\n<p>\u4ee5 <code>--n = 5<\/code>\uff08bit2=1, bit0=1\uff09\u4e3a\u4f8b\uff1a<\/p>\n<ul>\n<li>bit0=1 \u2192 \u8f93\u51fa <code>--pow0<\/code> = 1 \u4e2a x<\/li>\n<li>bit1=0 \u2192 \u7a7a<\/li>\n<li>bit2=1 \u2192 \u8f93\u51fa <code>--pow2<\/code> = 4 \u4e2a x<\/li>\n<li>\u5176\u4f59 \u2192 \u7a7a<\/li>\n<li>\u62fc\u63a5 = <code>4 + 1 = 5<\/code> \u4e2a x \u2705<\/li>\n<\/ul>\n<h4>5. \u6574\u4f53\u539f\u7406\u4e00\u53e5\u8bdd\u603b\u7ed3<\/h4>\n<blockquote><p>\n\u628a&#8221;\u91cd\u590d N \u6b21&#8221;\u8fd9\u4e2a\u65e0\u6cd5\u7528\u5faa\u73af\u8868\u8fbe\u7684\u64cd\u4f5c\uff0c\u8f6c\u5316\u4e3a&#8221;N \u7684\u4e8c\u8fdb\u5236\u5206\u89e3&#8221;\u95ee\u9898\uff1a\u5148\u7528\u500d\u589e\u6cd5\u9884\u751f\u6210 1\u30012\u30014\u3001\u2026\u3001128 \u4efd\u526f\u672c\uff0c\u518d\u6839\u636e N \u7684\u6bcf\u4e00\u4e2a\u4e8c\u8fdb\u5236\u4f4d\u51b3\u5b9a\u662f\u5426\u628a\u5bf9\u5e94\u4efd\u6570\u62fc\u8fdb\u7ed3\u679c\uff0c\u6700\u7ec8\u62fc\u51fa\u7684\u603b\u4efd\u6570\u6070\u597d\u7b49\u4e8e N\u3002\n<\/p><\/blockquote>\n<p>\u8fd9\u672c\u8d28\u4e0a\u5c31\u662f<strong>\u5feb\u901f\u5e42 \/ \u4e8c\u8fdb\u5236\u62c6\u5206<\/strong>\u601d\u60f3\u5728 CSS token \u62fc\u63a5\u4e0a\u7684\u5e94\u7528\uff0c\u628a\u539f\u672c\u9700\u8981 O(N) \u6b21\u5faa\u73af\u7684\u91cd\u590d\uff0c\u538b\u7f29\u6210 O(log N) = \u6700\u591a 8 \u4e2a\u56fa\u5b9a\u7684\u6761\u4ef6\u5224\u65ad\u3002<\/p>\n<p><strong>\u51e0\u4e2a\u503c\u5f97\u6ce8\u610f\u7684\u7ec6\u8282<\/strong><\/p>\n<ol>\n<li>\n<strong>\u4e3a\u4ec0\u4e48 <code>--x<\/code> \u53ef\u4ee5\u662f&#8221;\u5b57\u7b26\u4e32\u6216\u5c5e\u6027\u503c&#8221;<\/strong>\uff1aCSS \u81ea\u5b9a\u4e49\u5c5e\u6027\u5b58\u7684\u662f\u672a\u89e3\u6790\u7684 token \u5e8f\u5217\uff0c<code>--x<\/code> \u53ea\u662f\u88ab\u5f53\u4f5c\u4e00\u6bb5 token \u53cd\u590d\u62fc\u63a5\uff0c\u51fd\u6570\u672c\u8eab\u4e0d\u5173\u5fc3\u5b83\u8bed\u4e49\u4e0a\u662f\u5173\u952e\u5b57\u3001\u957f\u5ea6\u503c\u8fd8\u662f\u5b57\u7b26\u4e32\u7247\u6bb5\uff0c\u6240\u4ee5\u65e2\u80fd\u62fc <code>grid-template-columns<\/code> \u7684 <code>1fr<\/code>\uff0c\u4e5f\u80fd\u62fc\u5e73\u94fa\u6587\u672c\u7247\u6bb5\u3002\u6700\u7ec8\u7531\u4f7f\u7528\u65b9\u7684\u5c5e\u6027\u53bb\u89e3\u91ca\u8fd9\u4e32 token \u7684\u542b\u4e49\u3002\n<\/li>\n<li>\n<strong>\u5206\u9694\u7b26\u662f\u7a7a\u683c<\/strong>\uff1a<code>var(--pow0) var(--pow0)<\/code> \u4e4b\u95f4\u5929\u7136\u6709\u7a7a\u683c\uff0c<code>if()<\/code> \u5404\u6bb5\u4e4b\u95f4\u4e5f\u6709\u7a7a\u683c\u3002\u6240\u4ee5\u5b83\u505a\u7684\u662f&#8221;\u7a7a\u683c\u5206\u9694\u7684\u5e73\u94fa&#8221;\uff0c\u975e\u5e38\u9002\u5408 <code>grid-template-columns: --repeat(10, 1fr)<\/code> \u8fd9\u7c7b\u573a\u666f\uff08\u7b49\u6548\u4e8e <code>repeat(10, 1fr)<\/code> \u5c55\u5f00\uff09\u3002\n<\/li>\n<li>\n<strong>\u4e0a\u9650 255<\/strong>\uff1a\u53ea\u5c55\u5f00\u5230 <code>bit7 \/ pow7<\/code>\u3002\u60f3\u652f\u6301\u66f4\u5927\uff0c\u518d\u5f80\u4e0a\u52a0 <code>bit8 \/ pow8<\/code>\uff08256\uff09\u5373\u53ef\uff0c\u6309\u540c\u6837\u89c4\u5f8b\u6269\u5c55\u3002\n<\/li>\n<li>\n<strong>\u4f9d\u8d56\u7684\u65b0\u7279\u6027<\/strong>\uff1a<code>@function<\/code>\u3001<code>if()<\/code> + <code>style()<\/code> \u67e5\u8be2\u3001<code>round()<\/code> \u6570\u5b66\u51fd\u6570\u2014\u2014\u90fd\u5c5e\u4e8e\u8f83\u65b0\u7684 CSS \u89c4\u8303\uff08CSS Values 4 \/ CSS Functions\uff09\uff0c\u76ee\u524d\u6d4f\u89c8\u5668\u652f\u6301\u4ecd\u5728\u94fa\u5f00\u9636\u6bb5\uff0c\u9700\u6ce8\u610f\u517c\u5bb9\u6027\u3002\n<\/li>\n<\/ol>\n<h3>\u56db\u3001\u7ed3\u8bed\u8bf4\u660e<\/h3>\n<p>\u672c\u6587\u5185\u5bb9\u8ba9\u6211\u4e0d\u7531\u5f97\u60f3\u8d774\u6708\u4efd\u4ecb\u7ecd\u7684\u8702\u5de2\u5e03\u5c40\u6548\u679c\uff0c\u4e5f\u5c31\u662f\u91d1\u5b57\u5854\u5e03\u5c40\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2026\/04\/css-pyramidal-grid\/\">CSS\u516d\u8fb9\u5f62\u5934\u50cf\u7684\u5b9e\u73b0\u4e0e\u8702\u5de2\u5e03\u5c40<\/a>\u3002<\/p>\n<p>\u5176\u4e2d\uff0c\u4e5f\u7528\u5230\u4e86CSS <code>if()<\/code>\u51fd\u6570\u548c\u5927\u91cf\u7684\u6570\u5b66\u8ba1\u7b97\u3002<\/p>\n<p>\u4e0d\u8fc7\uff0c\u8fd9\u79cd\u6848\u4f8b\u70ab\u6280\u7684\u6210\u5206\u5927\u4e00\u4e9b\uff0c\u8fd8\u4e0d\u592a\u9002\u5408\u7528\u5728\u751f\u4ea7\u73af\u5883\u3002<\/p>\n<p>\u5b9e\u9645\u5f00\u53d1\uff0c\u591a\u534a\u8fd8\u662f\u8001\u8001\u5b9e\u5b9e\u5b57\u7b26\u5e73\u94fa\u5199\u6b7b\uff0c\u800c\u4e0d\u4f1a\u4f7f\u7528\u81ea\u5b9a\u4e49\u7684 <code>--repeat<\/code> \u51fd\u6570\u3002<\/p>\n<p>\u597d\u4e86\uff0c\u5c31\u8bf4\u8fd9\u4e48\u591a\u5427\uff0c\u7b97\u662f\u589e\u957f\u773c\u754c\u7684\u4e00\u7bc7\u6587\u7ae0\u4e86\u3002<\/p>\n<p><strong>\u53c2\u8003\u6587\u7ae0\uff1a<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/dev.to\/janeori\/100-css-repeat-n-anything-59ni\" rel=\"noopener\" target=\"_blank\">100% CSS: repeat(&#8211;n, anything)<\/a><\/li>\n<\/ul>\n<p>\ud83d\ude09\ud83d\ude0a\ud83d\ude07<br \/>\n\ud83e\udd70\ud83d\ude0d\ud83d\ude18<\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=12312\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=12312<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202607\/2026-7-23_153636.webp\" width=\"160\" height=\"103\" alt=\"CSS\u81ea\u5b9a\u4e49repeat\u51fd\u6570\u5c01\u9762\u56fe\" class=\"alignright size-medium\" loading=\"lazy\" \/><\/p>\n<p>CSS\u73b0\u5728\u5c45\u7136\u6709\u80fd\u529b\u53ef\u4ee5\u81ea\u5b9a\u4e49\u4efb\u610f\u7c7b\u578b\u5c5e\u6027\u503c\u5e73\u94fa\u7684\u51fd\u6570\u4e86\uff0c\u5de7\u5999\u5229\u7528\u4e8c\u8fdb\u5236\u5206\u89e3 + \u5feb\u901f\u5e42\u601d\u60f3\u5b9e\u73b0\uff0c\u4ee4\u4eba\u5927\u5f00\u773c\u754c\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[939,1055,1827,2093,1283,1818,2065,575,385],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/12312"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=12312"}],"version-history":[{"count":10,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/12312\/revisions"}],"predecessor-version":[{"id":12333,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/12312\/revisions\/12333"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=12312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=12312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=12312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}