[{"data":1,"prerenderedAt":2597},["ShallowReactive",2],{"blog-css-border-tricks":3},{"id":4,"title":5,"body":6,"category":89,"date":2586,"description":2587,"draft":2588,"extension":2589,"meta":2590,"navigation":227,"path":2591,"seo":2592,"stem":2593,"tags":2594,"__hash__":2596},"blog\u002Fblog\u002Fcss-border-tricks.md","CSS 边框两式：动画渐变条纹与 border-image",{"type":7,"value":8,"toc":2581},"minimark",[9,13,33,38,49,76,86,649,664,667,1719,1723,1729,1747,1750,1800,1814,1909,1915,2541,2544,2575,2578],[10,11,5],"h1",{"id":12},"css-边框两式动画渐变条纹与-border-image",[14,15,16,17,21,22,26,27,32],"p",{},"给卡片加边框，不一定只靠 ",[18,19,20],"code",{},"border: 1px solid","。纯 CSS 可以用",[23,24,25],"strong",{},"双层背景","画出会流动的渐变条纹；有切图素材时，用 ",[23,28,29],{},[18,30,31],{},"border-image"," 让装饰边框随容器伸缩。两种方案都不依赖 JavaScript，下面分别拆解。",[34,35,37],"h2",{"id":36},"方案一动画渐变条纹边框","方案一：动画渐变条纹边框",[14,39,40,41,44,45,48],{},"思路是把 ",[18,42,43],{},"border"," 设为透明，再用两层 ",[18,46,47],{},"background"," 分别填充内容区和边框区：",[50,51,52,63],"ul",{},[53,54,55,58,59,62],"li",{},[23,56,57],{},"内层","（",[18,60,61],{},"padding-box","）：纯白底，盖住中间",[53,64,65,58,68,71,72,75],{},[23,66,67],{},"外层",[18,69,70],{},"border-box","）：",[18,73,74],{},"repeating-linear-gradient"," 画斜向色块条纹",[14,77,78,81,82,85],{},[18,79,80],{},"@keyframes"," 只移动外层背景的 ",[18,83,84],{},"background-position","，hover 时条纹就会沿对角线流动。",[87,88,91],"code-block",{"lang":89,"title":90},"css","条纹边框核心 CSS",[92,93,97],"pre",{"className":94,"code":95,"language":89,"meta":96,"style":96},"language-css shiki shiki-themes github-light github-dark",".card {\n  --stripe-length: 24px;\n  --stripe-width: calc(var(--stripe-length) \u002F 3);\n  --stripe-gap: 10px;\n  --stripe-period: calc((var(--stripe-length) + var(--stripe-gap)) * 2);\n\n  padding: 10px;\n  border: var(--stripe-width) solid transparent;\n  border-radius: 14px;\n  background:\n    linear-gradient(#fff, #fff) padding-box,\n    repeating-linear-gradient(\n        -45deg,\n        #2dd4bf 0 var(--stripe-length),\n        #fff var(--stripe-length) calc(var(--stripe-length) + var(--stripe-gap)),\n        #fb7185 calc(var(--stripe-length) + var(--stripe-gap))\n          calc(var(--stripe-length) * 2 + var(--stripe-gap)),\n        #fff calc(var(--stripe-length) * 2 + var(--stripe-gap)) var(--stripe-period)\n      )\n      border-box;\n}\n\n.card:hover {\n  animation: stripe-flow 1s linear infinite;\n}\n\n@keyframes stripe-flow {\n  to {\n    background-position:\n      0 0,\n      calc(var(--stripe-period) * 1) calc(var(--stripe-period) * 1);\n  }\n}\n","",[18,98,99,112,133,167,182,222,229,243,268,283,292,315,324,335,353,390,420,453,495,501,509,515,520,528,551,556,561,571,579,587,597,638,644],{"__ignoreMap":96},[100,101,104,108],"span",{"class":102,"line":103},"line",1,[100,105,107],{"class":106},"sScJk",".card",[100,109,111],{"class":110},"sVt8B"," {\n",[100,113,115,119,122,126,130],{"class":102,"line":114},2,[100,116,118],{"class":117},"s4XuR","  --stripe-length",[100,120,121],{"class":110},": ",[100,123,125],{"class":124},"sj4cs","24",[100,127,129],{"class":128},"szBVR","px",[100,131,132],{"class":110},";\n",[100,134,136,139,141,144,147,150,152,155,158,161,164],{"class":102,"line":135},3,[100,137,138],{"class":117},"  --stripe-width",[100,140,121],{"class":110},[100,142,143],{"class":124},"calc",[100,145,146],{"class":110},"(",[100,148,149],{"class":124},"var",[100,151,146],{"class":110},[100,153,154],{"class":117},"--stripe-length",[100,156,157],{"class":110},") ",[100,159,160],{"class":128},"\u002F",[100,162,163],{"class":124}," 3",[100,165,166],{"class":110},");\n",[100,168,170,173,175,178,180],{"class":102,"line":169},4,[100,171,172],{"class":117},"  --stripe-gap",[100,174,121],{"class":110},[100,176,177],{"class":124},"10",[100,179,129],{"class":128},[100,181,132],{"class":110},[100,183,185,188,190,192,195,197,199,201,203,206,209,211,214,217,220],{"class":102,"line":184},5,[100,186,187],{"class":117},"  --stripe-period",[100,189,121],{"class":110},[100,191,143],{"class":124},[100,193,194],{"class":110},"((",[100,196,149],{"class":124},[100,198,146],{"class":110},[100,200,154],{"class":117},[100,202,157],{"class":110},[100,204,205],{"class":128},"+",[100,207,208],{"class":124}," var",[100,210,146],{"class":110},[100,212,213],{"class":117},"--stripe-gap",[100,215,216],{"class":110},")) * ",[100,218,219],{"class":124},"2",[100,221,166],{"class":110},[100,223,225],{"class":102,"line":224},6,[100,226,228],{"emptyLinePlaceholder":227},true,"\n",[100,230,232,235,237,239,241],{"class":102,"line":231},7,[100,233,234],{"class":124},"  padding",[100,236,121],{"class":110},[100,238,177],{"class":124},[100,240,129],{"class":128},[100,242,132],{"class":110},[100,244,246,249,251,253,255,258,260,263,266],{"class":102,"line":245},8,[100,247,248],{"class":124},"  border",[100,250,121],{"class":110},[100,252,149],{"class":124},[100,254,146],{"class":110},[100,256,257],{"class":117},"--stripe-width",[100,259,157],{"class":110},[100,261,262],{"class":124},"solid",[100,264,265],{"class":124}," transparent",[100,267,132],{"class":110},[100,269,271,274,276,279,281],{"class":102,"line":270},9,[100,272,273],{"class":124},"  border-radius",[100,275,121],{"class":110},[100,277,278],{"class":124},"14",[100,280,129],{"class":128},[100,282,132],{"class":110},[100,284,286,289],{"class":102,"line":285},10,[100,287,288],{"class":124},"  background",[100,290,291],{"class":110},":\n",[100,293,295,298,300,303,306,308,310,312],{"class":102,"line":294},11,[100,296,297],{"class":124},"    linear-gradient",[100,299,146],{"class":110},[100,301,302],{"class":124},"#fff",[100,304,305],{"class":110},", ",[100,307,302],{"class":124},[100,309,157],{"class":110},[100,311,61],{"class":124},[100,313,314],{"class":110},",\n",[100,316,318,321],{"class":102,"line":317},12,[100,319,320],{"class":124},"    repeating-linear-gradient",[100,322,323],{"class":110},"(\n",[100,325,327,330,333],{"class":102,"line":326},13,[100,328,329],{"class":124},"        -45",[100,331,332],{"class":128},"deg",[100,334,314],{"class":110},[100,336,338,341,344,346,348,350],{"class":102,"line":337},14,[100,339,340],{"class":124},"        #2dd4bf",[100,342,343],{"class":124}," 0",[100,345,208],{"class":124},[100,347,146],{"class":110},[100,349,154],{"class":117},[100,351,352],{"class":110},"),\n",[100,354,356,359,361,363,365,367,369,371,373,375,377,379,381,383,385,387],{"class":102,"line":355},15,[100,357,358],{"class":124},"        #fff",[100,360,208],{"class":124},[100,362,146],{"class":110},[100,364,154],{"class":117},[100,366,157],{"class":110},[100,368,143],{"class":124},[100,370,146],{"class":110},[100,372,149],{"class":124},[100,374,146],{"class":110},[100,376,154],{"class":117},[100,378,157],{"class":110},[100,380,205],{"class":128},[100,382,208],{"class":124},[100,384,146],{"class":110},[100,386,213],{"class":117},[100,388,389],{"class":110},")),\n",[100,391,393,396,399,401,403,405,407,409,411,413,415,417],{"class":102,"line":392},16,[100,394,395],{"class":124},"        #fb7185",[100,397,398],{"class":124}," calc",[100,400,146],{"class":110},[100,402,149],{"class":124},[100,404,146],{"class":110},[100,406,154],{"class":117},[100,408,157],{"class":110},[100,410,205],{"class":128},[100,412,208],{"class":124},[100,414,146],{"class":110},[100,416,213],{"class":117},[100,418,419],{"class":110},"))\n",[100,421,423,426,428,430,432,434,436,439,442,445,447,449,451],{"class":102,"line":422},17,[100,424,425],{"class":124},"          calc",[100,427,146],{"class":110},[100,429,149],{"class":124},[100,431,146],{"class":110},[100,433,154],{"class":117},[100,435,157],{"class":110},[100,437,438],{"class":128},"*",[100,440,441],{"class":124}," 2",[100,443,444],{"class":128}," +",[100,446,208],{"class":124},[100,448,146],{"class":110},[100,450,213],{"class":117},[100,452,389],{"class":110},[100,454,456,458,460,462,464,466,468,470,472,474,476,478,480,482,485,487,489,492],{"class":102,"line":455},18,[100,457,358],{"class":124},[100,459,398],{"class":124},[100,461,146],{"class":110},[100,463,149],{"class":124},[100,465,146],{"class":110},[100,467,154],{"class":117},[100,469,157],{"class":110},[100,471,438],{"class":128},[100,473,441],{"class":124},[100,475,444],{"class":128},[100,477,208],{"class":124},[100,479,146],{"class":110},[100,481,213],{"class":117},[100,483,484],{"class":110},")) ",[100,486,149],{"class":124},[100,488,146],{"class":110},[100,490,491],{"class":117},"--stripe-period",[100,493,494],{"class":110},")\n",[100,496,498],{"class":102,"line":497},19,[100,499,500],{"class":110},"      )\n",[100,502,504,507],{"class":102,"line":503},20,[100,505,506],{"class":124},"      border-box",[100,508,132],{"class":110},[100,510,512],{"class":102,"line":511},21,[100,513,514],{"class":110},"}\n",[100,516,518],{"class":102,"line":517},22,[100,519,228],{"emptyLinePlaceholder":227},[100,521,523,526],{"class":102,"line":522},23,[100,524,525],{"class":106},".card:hover",[100,527,111],{"class":110},[100,529,531,534,537,540,543,546,549],{"class":102,"line":530},24,[100,532,533],{"class":124},"  animation",[100,535,536],{"class":110},": stripe-flow ",[100,538,539],{"class":124},"1",[100,541,542],{"class":128},"s",[100,544,545],{"class":124}," linear",[100,547,548],{"class":124}," infinite",[100,550,132],{"class":110},[100,552,554],{"class":102,"line":553},25,[100,555,514],{"class":110},[100,557,559],{"class":102,"line":558},26,[100,560,228],{"emptyLinePlaceholder":227},[100,562,564,566,569],{"class":102,"line":563},27,[100,565,80],{"class":128},[100,567,568],{"class":117}," stripe-flow",[100,570,111],{"class":110},[100,572,574,577],{"class":102,"line":573},28,[100,575,576],{"class":106},"  to",[100,578,111],{"class":110},[100,580,582,585],{"class":102,"line":581},29,[100,583,584],{"class":124},"    background-position",[100,586,291],{"class":110},[100,588,590,593,595],{"class":102,"line":589},30,[100,591,592],{"class":124},"      0",[100,594,343],{"class":124},[100,596,314],{"class":110},[100,598,600,603,605,607,609,611,613,615,618,620,622,624,626,628,630,632,634,636],{"class":102,"line":599},31,[100,601,602],{"class":124},"      calc",[100,604,146],{"class":110},[100,606,149],{"class":124},[100,608,146],{"class":110},[100,610,491],{"class":117},[100,612,157],{"class":110},[100,614,438],{"class":128},[100,616,617],{"class":124}," 1",[100,619,157],{"class":110},[100,621,143],{"class":124},[100,623,146],{"class":110},[100,625,149],{"class":124},[100,627,146],{"class":110},[100,629,491],{"class":117},[100,631,157],{"class":110},[100,633,438],{"class":128},[100,635,617],{"class":124},[100,637,166],{"class":110},[100,639,641],{"class":102,"line":640},32,[100,642,643],{"class":110},"  }\n",[100,645,647],{"class":102,"line":646},33,[100,648,514],{"class":110},[14,650,651,654,655,657,658,660,661,663],{},[23,652,653],{},"可调参数","：",[18,656,154],{}," 控制色块长度，",[18,659,213],{}," 控制白色细缝宽度，改 ",[18,662,257],{}," 等价于改边框粗细。",[14,665,666],{},"悬停卡片，观察条纹流动：",[668,669,671],"code-playground",{"title":670},"动画条纹边框",[92,672,676],{"className":673,"code":674,"language":675,"meta":96,"style":96},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv class=\"stage\">\n    \u003Cdiv class=\"card\">\n      \u003Cp class=\"ct\">\n        悬停此卡片，斜向条纹会沿对角线流动。纯 CSS 实现，无需图片。\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.stage {\n  display: grid;\n  place-items: center;\n  min-height: 220px;\n  padding: 24px;\n  background: linear-gradient(135deg, #f0fdfa 0%, #fff5f7 100%);\n  border-radius: 12px;\n}\n\n.card {\n  --stripe-length: 24px;\n  --stripe-width: calc(var(--stripe-length) \u002F 3);\n  --stripe-gap: 10px;\n  --stripe-period: calc((var(--stripe-length) + var(--stripe-gap)) * 2);\n  width: min(100%, 320px);\n  padding: 10px;\n  border-radius: 14px;\n  border: var(--stripe-width) solid transparent;\n  cursor: pointer;\n  background:\n    linear-gradient(#fff, #fff) padding-box,\n    repeating-linear-gradient(\n        -45deg,\n        #2dd4bf 0 var(--stripe-length),\n        #fff var(--stripe-length) calc(var(--stripe-length) + var(--stripe-gap)),\n        #fb7185 calc(var(--stripe-length) + var(--stripe-gap))\n          calc(var(--stripe-length) * 2 + var(--stripe-gap)),\n        #fff calc(var(--stripe-length) * 2 + var(--stripe-gap)) var(--stripe-period)\n      )\n      border-box;\n  background-position: 0 0, 0 0;\n  box-shadow:\n    0 10px 40px rgba(45, 212, 191, 0.12),\n    0 4px 12px rgba(251, 113, 133, 0.08);\n  transition: transform 0.35s ease, box-shadow 0.35s ease;\n}\n\n.card:hover {\n  transform: translateY(-4px);\n  box-shadow:\n    0 16px 48px rgba(45, 212, 191, 0.2),\n    0 8px 20px rgba(251, 113, 133, 0.12);\n  animation: stripe-flow 1s linear infinite;\n}\n\n@keyframes stripe-flow {\n  to {\n    background-position:\n      0 0,\n      calc(var(--stripe-period) * 1) calc(var(--stripe-period) * 1);\n  }\n}\n\n.ct {\n  margin: 0;\n  font-size: 15px;\n  line-height: 1.7;\n  color: #4a5568;\n}\n\u003C\u002Fstyle>\n","vue",[18,677,678,690,710,726,742,747,756,765,774,783,787,799,806,818,830,844,856,894,907,911,915,921,933,957,969,1001,1027,1039,1051,1071,1083,1089,1107,1113,1122,1137,1172,1199,1228,1267,1272,1279,1300,1308,1349,1388,1416,1421,1426,1433,1453,1460,1496,1531,1548,1553,1558,1567,1574,1581,1590,1629,1634,1639,1644,1652,1664,1679,1692,1705,1710],{"__ignoreMap":96},[100,679,680,683,687],{"class":102,"line":103},[100,681,682],{"class":110},"\u003C",[100,684,686],{"class":685},"s9eBZ","template",[100,688,689],{"class":110},">\n",[100,691,692,695,698,701,704,708],{"class":102,"line":114},[100,693,694],{"class":110},"  \u003C",[100,696,697],{"class":685},"div",[100,699,700],{"class":106}," class",[100,702,703],{"class":110},"=",[100,705,707],{"class":706},"sZZnC","\"stage\"",[100,709,689],{"class":110},[100,711,712,715,717,719,721,724],{"class":102,"line":135},[100,713,714],{"class":110},"    \u003C",[100,716,697],{"class":685},[100,718,700],{"class":106},[100,720,703],{"class":110},[100,722,723],{"class":706},"\"card\"",[100,725,689],{"class":110},[100,727,728,731,733,735,737,740],{"class":102,"line":169},[100,729,730],{"class":110},"      \u003C",[100,732,14],{"class":685},[100,734,700],{"class":106},[100,736,703],{"class":110},[100,738,739],{"class":706},"\"ct\"",[100,741,689],{"class":110},[100,743,744],{"class":102,"line":184},[100,745,746],{"class":110},"        悬停此卡片，斜向条纹会沿对角线流动。纯 CSS 实现，无需图片。\n",[100,748,749,752,754],{"class":102,"line":224},[100,750,751],{"class":110},"      \u003C\u002F",[100,753,14],{"class":685},[100,755,689],{"class":110},[100,757,758,761,763],{"class":102,"line":231},[100,759,760],{"class":110},"    \u003C\u002F",[100,762,697],{"class":685},[100,764,689],{"class":110},[100,766,767,770,772],{"class":102,"line":245},[100,768,769],{"class":110},"  \u003C\u002F",[100,771,697],{"class":685},[100,773,689],{"class":110},[100,775,776,779,781],{"class":102,"line":270},[100,777,778],{"class":110},"\u003C\u002F",[100,780,686],{"class":685},[100,782,689],{"class":110},[100,784,785],{"class":102,"line":285},[100,786,228],{"emptyLinePlaceholder":227},[100,788,789,791,794,797],{"class":102,"line":294},[100,790,682],{"class":110},[100,792,793],{"class":685},"style",[100,795,796],{"class":106}," scoped",[100,798,689],{"class":110},[100,800,801,804],{"class":102,"line":317},[100,802,803],{"class":106},".stage",[100,805,111],{"class":110},[100,807,808,811,813,816],{"class":102,"line":326},[100,809,810],{"class":124},"  display",[100,812,121],{"class":110},[100,814,815],{"class":124},"grid",[100,817,132],{"class":110},[100,819,820,823,825,828],{"class":102,"line":337},[100,821,822],{"class":124},"  place-items",[100,824,121],{"class":110},[100,826,827],{"class":124},"center",[100,829,132],{"class":110},[100,831,832,835,837,840,842],{"class":102,"line":355},[100,833,834],{"class":124},"  min-height",[100,836,121],{"class":110},[100,838,839],{"class":124},"220",[100,841,129],{"class":128},[100,843,132],{"class":110},[100,845,846,848,850,852,854],{"class":102,"line":392},[100,847,234],{"class":124},[100,849,121],{"class":110},[100,851,125],{"class":124},[100,853,129],{"class":128},[100,855,132],{"class":110},[100,857,858,860,862,865,867,870,872,874,877,879,882,884,887,890,892],{"class":102,"line":422},[100,859,288],{"class":124},[100,861,121],{"class":110},[100,863,864],{"class":124},"linear-gradient",[100,866,146],{"class":110},[100,868,869],{"class":124},"135",[100,871,332],{"class":128},[100,873,305],{"class":110},[100,875,876],{"class":124},"#f0fdfa",[100,878,343],{"class":124},[100,880,881],{"class":128},"%",[100,883,305],{"class":110},[100,885,886],{"class":124},"#fff5f7",[100,888,889],{"class":124}," 100",[100,891,881],{"class":128},[100,893,166],{"class":110},[100,895,896,898,900,903,905],{"class":102,"line":455},[100,897,273],{"class":124},[100,899,121],{"class":110},[100,901,902],{"class":124},"12",[100,904,129],{"class":128},[100,906,132],{"class":110},[100,908,909],{"class":102,"line":497},[100,910,514],{"class":110},[100,912,913],{"class":102,"line":503},[100,914,228],{"emptyLinePlaceholder":227},[100,916,917,919],{"class":102,"line":511},[100,918,107],{"class":106},[100,920,111],{"class":110},[100,922,923,925,927,929,931],{"class":102,"line":517},[100,924,118],{"class":117},[100,926,121],{"class":110},[100,928,125],{"class":124},[100,930,129],{"class":128},[100,932,132],{"class":110},[100,934,935,937,939,941,943,945,947,949,951,953,955],{"class":102,"line":522},[100,936,138],{"class":117},[100,938,121],{"class":110},[100,940,143],{"class":124},[100,942,146],{"class":110},[100,944,149],{"class":124},[100,946,146],{"class":110},[100,948,154],{"class":117},[100,950,157],{"class":110},[100,952,160],{"class":128},[100,954,163],{"class":124},[100,956,166],{"class":110},[100,958,959,961,963,965,967],{"class":102,"line":530},[100,960,172],{"class":117},[100,962,121],{"class":110},[100,964,177],{"class":124},[100,966,129],{"class":128},[100,968,132],{"class":110},[100,970,971,973,975,977,979,981,983,985,987,989,991,993,995,997,999],{"class":102,"line":553},[100,972,187],{"class":117},[100,974,121],{"class":110},[100,976,143],{"class":124},[100,978,194],{"class":110},[100,980,149],{"class":124},[100,982,146],{"class":110},[100,984,154],{"class":117},[100,986,157],{"class":110},[100,988,205],{"class":128},[100,990,208],{"class":124},[100,992,146],{"class":110},[100,994,213],{"class":117},[100,996,216],{"class":110},[100,998,219],{"class":124},[100,1000,166],{"class":110},[100,1002,1003,1006,1008,1011,1013,1016,1018,1020,1023,1025],{"class":102,"line":558},[100,1004,1005],{"class":124},"  width",[100,1007,121],{"class":110},[100,1009,1010],{"class":124},"min",[100,1012,146],{"class":110},[100,1014,1015],{"class":124},"100",[100,1017,881],{"class":128},[100,1019,305],{"class":110},[100,1021,1022],{"class":124},"320",[100,1024,129],{"class":128},[100,1026,166],{"class":110},[100,1028,1029,1031,1033,1035,1037],{"class":102,"line":563},[100,1030,234],{"class":124},[100,1032,121],{"class":110},[100,1034,177],{"class":124},[100,1036,129],{"class":128},[100,1038,132],{"class":110},[100,1040,1041,1043,1045,1047,1049],{"class":102,"line":573},[100,1042,273],{"class":124},[100,1044,121],{"class":110},[100,1046,278],{"class":124},[100,1048,129],{"class":128},[100,1050,132],{"class":110},[100,1052,1053,1055,1057,1059,1061,1063,1065,1067,1069],{"class":102,"line":581},[100,1054,248],{"class":124},[100,1056,121],{"class":110},[100,1058,149],{"class":124},[100,1060,146],{"class":110},[100,1062,257],{"class":117},[100,1064,157],{"class":110},[100,1066,262],{"class":124},[100,1068,265],{"class":124},[100,1070,132],{"class":110},[100,1072,1073,1076,1078,1081],{"class":102,"line":589},[100,1074,1075],{"class":124},"  cursor",[100,1077,121],{"class":110},[100,1079,1080],{"class":124},"pointer",[100,1082,132],{"class":110},[100,1084,1085,1087],{"class":102,"line":599},[100,1086,288],{"class":124},[100,1088,291],{"class":110},[100,1090,1091,1093,1095,1097,1099,1101,1103,1105],{"class":102,"line":640},[100,1092,297],{"class":124},[100,1094,146],{"class":110},[100,1096,302],{"class":124},[100,1098,305],{"class":110},[100,1100,302],{"class":124},[100,1102,157],{"class":110},[100,1104,61],{"class":124},[100,1106,314],{"class":110},[100,1108,1109,1111],{"class":102,"line":646},[100,1110,320],{"class":124},[100,1112,323],{"class":110},[100,1114,1116,1118,1120],{"class":102,"line":1115},34,[100,1117,329],{"class":124},[100,1119,332],{"class":128},[100,1121,314],{"class":110},[100,1123,1125,1127,1129,1131,1133,1135],{"class":102,"line":1124},35,[100,1126,340],{"class":124},[100,1128,343],{"class":124},[100,1130,208],{"class":124},[100,1132,146],{"class":110},[100,1134,154],{"class":117},[100,1136,352],{"class":110},[100,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160,1162,1164,1166,1168,1170],{"class":102,"line":1139},36,[100,1141,358],{"class":124},[100,1143,208],{"class":124},[100,1145,146],{"class":110},[100,1147,154],{"class":117},[100,1149,157],{"class":110},[100,1151,143],{"class":124},[100,1153,146],{"class":110},[100,1155,149],{"class":124},[100,1157,146],{"class":110},[100,1159,154],{"class":117},[100,1161,157],{"class":110},[100,1163,205],{"class":128},[100,1165,208],{"class":124},[100,1167,146],{"class":110},[100,1169,213],{"class":117},[100,1171,389],{"class":110},[100,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197],{"class":102,"line":1174},37,[100,1176,395],{"class":124},[100,1178,398],{"class":124},[100,1180,146],{"class":110},[100,1182,149],{"class":124},[100,1184,146],{"class":110},[100,1186,154],{"class":117},[100,1188,157],{"class":110},[100,1190,205],{"class":128},[100,1192,208],{"class":124},[100,1194,146],{"class":110},[100,1196,213],{"class":117},[100,1198,419],{"class":110},[100,1200,1202,1204,1206,1208,1210,1212,1214,1216,1218,1220,1222,1224,1226],{"class":102,"line":1201},38,[100,1203,425],{"class":124},[100,1205,146],{"class":110},[100,1207,149],{"class":124},[100,1209,146],{"class":110},[100,1211,154],{"class":117},[100,1213,157],{"class":110},[100,1215,438],{"class":128},[100,1217,441],{"class":124},[100,1219,444],{"class":128},[100,1221,208],{"class":124},[100,1223,146],{"class":110},[100,1225,213],{"class":117},[100,1227,389],{"class":110},[100,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265],{"class":102,"line":1230},39,[100,1232,358],{"class":124},[100,1234,398],{"class":124},[100,1236,146],{"class":110},[100,1238,149],{"class":124},[100,1240,146],{"class":110},[100,1242,154],{"class":117},[100,1244,157],{"class":110},[100,1246,438],{"class":128},[100,1248,441],{"class":124},[100,1250,444],{"class":128},[100,1252,208],{"class":124},[100,1254,146],{"class":110},[100,1256,213],{"class":117},[100,1258,484],{"class":110},[100,1260,149],{"class":124},[100,1262,146],{"class":110},[100,1264,491],{"class":117},[100,1266,494],{"class":110},[100,1268,1270],{"class":102,"line":1269},40,[100,1271,500],{"class":110},[100,1273,1275,1277],{"class":102,"line":1274},41,[100,1276,506],{"class":124},[100,1278,132],{"class":110},[100,1280,1282,1285,1287,1290,1292,1294,1296,1298],{"class":102,"line":1281},42,[100,1283,1284],{"class":124},"  background-position",[100,1286,121],{"class":110},[100,1288,1289],{"class":124},"0",[100,1291,343],{"class":124},[100,1293,305],{"class":110},[100,1295,1289],{"class":124},[100,1297,343],{"class":124},[100,1299,132],{"class":110},[100,1301,1303,1306],{"class":102,"line":1302},43,[100,1304,1305],{"class":124},"  box-shadow",[100,1307,291],{"class":110},[100,1309,1311,1314,1317,1319,1322,1324,1327,1329,1332,1334,1337,1339,1342,1344,1347],{"class":102,"line":1310},44,[100,1312,1313],{"class":124},"    0",[100,1315,1316],{"class":124}," 10",[100,1318,129],{"class":128},[100,1320,1321],{"class":124}," 40",[100,1323,129],{"class":128},[100,1325,1326],{"class":124}," rgba",[100,1328,146],{"class":110},[100,1330,1331],{"class":124},"45",[100,1333,305],{"class":110},[100,1335,1336],{"class":124},"212",[100,1338,305],{"class":110},[100,1340,1341],{"class":124},"191",[100,1343,305],{"class":110},[100,1345,1346],{"class":124},"0.12",[100,1348,352],{"class":110},[100,1350,1352,1354,1357,1359,1362,1364,1366,1368,1371,1373,1376,1378,1381,1383,1386],{"class":102,"line":1351},45,[100,1353,1313],{"class":124},[100,1355,1356],{"class":124}," 4",[100,1358,129],{"class":128},[100,1360,1361],{"class":124}," 12",[100,1363,129],{"class":128},[100,1365,1326],{"class":124},[100,1367,146],{"class":110},[100,1369,1370],{"class":124},"251",[100,1372,305],{"class":110},[100,1374,1375],{"class":124},"113",[100,1377,305],{"class":110},[100,1379,1380],{"class":124},"133",[100,1382,305],{"class":110},[100,1384,1385],{"class":124},"0.08",[100,1387,166],{"class":110},[100,1389,1391,1394,1397,1400,1402,1405,1408,1410,1412,1414],{"class":102,"line":1390},46,[100,1392,1393],{"class":124},"  transition",[100,1395,1396],{"class":110},": transform ",[100,1398,1399],{"class":124},"0.35",[100,1401,542],{"class":128},[100,1403,1404],{"class":124}," ease",[100,1406,1407],{"class":110},", box-shadow ",[100,1409,1399],{"class":124},[100,1411,542],{"class":128},[100,1413,1404],{"class":124},[100,1415,132],{"class":110},[100,1417,1419],{"class":102,"line":1418},47,[100,1420,514],{"class":110},[100,1422,1424],{"class":102,"line":1423},48,[100,1425,228],{"emptyLinePlaceholder":227},[100,1427,1429,1431],{"class":102,"line":1428},49,[100,1430,525],{"class":106},[100,1432,111],{"class":110},[100,1434,1436,1439,1441,1444,1446,1449,1451],{"class":102,"line":1435},50,[100,1437,1438],{"class":124},"  transform",[100,1440,121],{"class":110},[100,1442,1443],{"class":124},"translateY",[100,1445,146],{"class":110},[100,1447,1448],{"class":124},"-4",[100,1450,129],{"class":128},[100,1452,166],{"class":110},[100,1454,1456,1458],{"class":102,"line":1455},51,[100,1457,1305],{"class":124},[100,1459,291],{"class":110},[100,1461,1463,1465,1468,1470,1473,1475,1477,1479,1481,1483,1485,1487,1489,1491,1494],{"class":102,"line":1462},52,[100,1464,1313],{"class":124},[100,1466,1467],{"class":124}," 16",[100,1469,129],{"class":128},[100,1471,1472],{"class":124}," 48",[100,1474,129],{"class":128},[100,1476,1326],{"class":124},[100,1478,146],{"class":110},[100,1480,1331],{"class":124},[100,1482,305],{"class":110},[100,1484,1336],{"class":124},[100,1486,305],{"class":110},[100,1488,1341],{"class":124},[100,1490,305],{"class":110},[100,1492,1493],{"class":124},"0.2",[100,1495,352],{"class":110},[100,1497,1499,1501,1504,1506,1509,1511,1513,1515,1517,1519,1521,1523,1525,1527,1529],{"class":102,"line":1498},53,[100,1500,1313],{"class":124},[100,1502,1503],{"class":124}," 8",[100,1505,129],{"class":128},[100,1507,1508],{"class":124}," 20",[100,1510,129],{"class":128},[100,1512,1326],{"class":124},[100,1514,146],{"class":110},[100,1516,1370],{"class":124},[100,1518,305],{"class":110},[100,1520,1375],{"class":124},[100,1522,305],{"class":110},[100,1524,1380],{"class":124},[100,1526,305],{"class":110},[100,1528,1346],{"class":124},[100,1530,166],{"class":110},[100,1532,1534,1536,1538,1540,1542,1544,1546],{"class":102,"line":1533},54,[100,1535,533],{"class":124},[100,1537,536],{"class":110},[100,1539,539],{"class":124},[100,1541,542],{"class":128},[100,1543,545],{"class":124},[100,1545,548],{"class":124},[100,1547,132],{"class":110},[100,1549,1551],{"class":102,"line":1550},55,[100,1552,514],{"class":110},[100,1554,1556],{"class":102,"line":1555},56,[100,1557,228],{"emptyLinePlaceholder":227},[100,1559,1561,1563,1565],{"class":102,"line":1560},57,[100,1562,80],{"class":128},[100,1564,568],{"class":117},[100,1566,111],{"class":110},[100,1568,1570,1572],{"class":102,"line":1569},58,[100,1571,576],{"class":106},[100,1573,111],{"class":110},[100,1575,1577,1579],{"class":102,"line":1576},59,[100,1578,584],{"class":124},[100,1580,291],{"class":110},[100,1582,1584,1586,1588],{"class":102,"line":1583},60,[100,1585,592],{"class":124},[100,1587,343],{"class":124},[100,1589,314],{"class":110},[100,1591,1593,1595,1597,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627],{"class":102,"line":1592},61,[100,1594,602],{"class":124},[100,1596,146],{"class":110},[100,1598,149],{"class":124},[100,1600,146],{"class":110},[100,1602,491],{"class":117},[100,1604,157],{"class":110},[100,1606,438],{"class":128},[100,1608,617],{"class":124},[100,1610,157],{"class":110},[100,1612,143],{"class":124},[100,1614,146],{"class":110},[100,1616,149],{"class":124},[100,1618,146],{"class":110},[100,1620,491],{"class":117},[100,1622,157],{"class":110},[100,1624,438],{"class":128},[100,1626,617],{"class":124},[100,1628,166],{"class":110},[100,1630,1632],{"class":102,"line":1631},62,[100,1633,643],{"class":110},[100,1635,1637],{"class":102,"line":1636},63,[100,1638,514],{"class":110},[100,1640,1642],{"class":102,"line":1641},64,[100,1643,228],{"emptyLinePlaceholder":227},[100,1645,1647,1650],{"class":102,"line":1646},65,[100,1648,1649],{"class":106},".ct",[100,1651,111],{"class":110},[100,1653,1655,1658,1660,1662],{"class":102,"line":1654},66,[100,1656,1657],{"class":124},"  margin",[100,1659,121],{"class":110},[100,1661,1289],{"class":124},[100,1663,132],{"class":110},[100,1665,1667,1670,1672,1675,1677],{"class":102,"line":1666},67,[100,1668,1669],{"class":124},"  font-size",[100,1671,121],{"class":110},[100,1673,1674],{"class":124},"15",[100,1676,129],{"class":128},[100,1678,132],{"class":110},[100,1680,1682,1685,1687,1690],{"class":102,"line":1681},68,[100,1683,1684],{"class":124},"  line-height",[100,1686,121],{"class":110},[100,1688,1689],{"class":124},"1.7",[100,1691,132],{"class":110},[100,1693,1695,1698,1700,1703],{"class":102,"line":1694},69,[100,1696,1697],{"class":124},"  color",[100,1699,121],{"class":110},[100,1701,1702],{"class":124},"#4a5568",[100,1704,132],{"class":110},[100,1706,1708],{"class":102,"line":1707},70,[100,1709,514],{"class":110},[100,1711,1713,1715,1717],{"class":102,"line":1712},71,[100,1714,778],{"class":110},[100,1716,793],{"class":685},[100,1718,689],{"class":110},[34,1720,1722],{"id":1721},"方案二border-image-图片切片边框","方案二：border-image 图片切片边框",[14,1724,1725,1726,1728],{},"有九宫格切图时，",[18,1727,31],{}," 可以把四角固定、四边平铺或拉伸。简写语法：",[92,1730,1732],{"className":94,"code":1731,"language":89,"meta":96,"style":96},"border-image: url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 round;\n",[18,1733,1734],{"__ignoreMap":96},[100,1735,1736,1738,1741,1744],{"class":102,"line":103},[100,1737,31],{"class":685},[100,1739,1740],{"class":110},": url('\u002Fdemos\u002F",[100,1742,1743],{"class":685},"css-borders",[100,1745,1746],{"class":110},"\u002Fborderimg.png') 320 round;\n",[14,1748,1749],{},"等价于：",[1751,1752,1753,1766],"table",{},[1754,1755,1756],"thead",{},[1757,1758,1759,1763],"tr",{},[1760,1761,1762],"th",{},"属性",[1760,1764,1765],{},"含义",[1767,1768,1769,1780,1790],"tbody",{},[1757,1770,1771,1777],{},[1772,1773,1774],"td",{},[18,1775,1776],{},"border-image-source",[1772,1778,1779],{},"装饰图 URL",[1757,1781,1782,1787],{},[1772,1783,1784],{},[18,1785,1786],{},"border-image-slice: 320",[1772,1788,1789],{},"从四边向内切 320px（数字无单位 = 像素）",[1757,1791,1792,1797],{},[1772,1793,1794],{},[18,1795,1796],{},"border-image-repeat: round",[1772,1798,1799],{},"边段重复并缩放以填满，不留空隙",[14,1801,1802,1805,1806,1809,1810,1813],{},[18,1803,1804],{},"round"," 适合等宽花纹；",[18,1807,1808],{},"repeat"," 原尺寸重复可能裁切；",[18,1811,1812],{},"stretch"," 拉伸变形但一定铺满。",[87,1815,1817],{"lang":89,"title":1816},"border-image 简写",[92,1818,1820],{"className":94,"code":1819,"language":89,"meta":96,"style":96},".box {\n  border: 50px solid transparent;\n  border-image: url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 round;\n  background: #111;\n  color: #fff;\n  padding: 20px;\n}\n",[18,1821,1822,1829,1847,1871,1882,1892,1905],{"__ignoreMap":96},[100,1823,1824,1827],{"class":102,"line":103},[100,1825,1826],{"class":106},".box",[100,1828,111],{"class":110},[100,1830,1831,1833,1835,1838,1840,1843,1845],{"class":102,"line":114},[100,1832,248],{"class":124},[100,1834,121],{"class":110},[100,1836,1837],{"class":124},"50",[100,1839,129],{"class":128},[100,1841,1842],{"class":124}," solid",[100,1844,265],{"class":124},[100,1846,132],{"class":110},[100,1848,1849,1852,1854,1857,1859,1862,1864,1866,1869],{"class":102,"line":135},[100,1850,1851],{"class":124},"  border-image",[100,1853,121],{"class":110},[100,1855,1856],{"class":124},"url",[100,1858,146],{"class":110},[100,1860,1861],{"class":706},"'\u002Fdemos\u002Fcss-borders\u002Fborderimg.png'",[100,1863,157],{"class":110},[100,1865,1022],{"class":124},[100,1867,1868],{"class":124}," round",[100,1870,132],{"class":110},[100,1872,1873,1875,1877,1880],{"class":102,"line":169},[100,1874,288],{"class":124},[100,1876,121],{"class":110},[100,1878,1879],{"class":124},"#111",[100,1881,132],{"class":110},[100,1883,1884,1886,1888,1890],{"class":102,"line":184},[100,1885,1697],{"class":124},[100,1887,121],{"class":110},[100,1889,302],{"class":124},[100,1891,132],{"class":110},[100,1893,1894,1896,1898,1901,1903],{"class":102,"line":224},[100,1895,234],{"class":124},[100,1897,121],{"class":110},[100,1899,1900],{"class":124},"20",[100,1902,129],{"class":128},[100,1904,132],{"class":110},[100,1906,1907],{"class":102,"line":231},[100,1908,514],{"class":110},[14,1910,1911,1912,1914],{},"切换 ",[18,1913,1808],{}," 模式，对比边框铺法差异：",[668,1916,1918],{"title":1917},"border-image 切片边框",[92,1919,1921],{"className":673,"code":1920,"language":675,"meta":96,"style":96},"\u003Ctemplate>\n  \u003Cdiv class=\"stage\">\n    \u003Clabel class=\"toolbar\">\n      border-image-repeat\n      \u003Cselect v-model=\"repeat\">\n        \u003Coption value=\"round\">round\u003C\u002Foption>\n        \u003Coption value=\"repeat\">repeat\u003C\u002Foption>\n        \u003Coption value=\"stretch\">stretch\u003C\u002Foption>\n      \u003C\u002Fselect>\n    \u003C\u002Flabel>\n    \u003Cdiv class=\"box\" :style=\"boxStyle\">\n      border-image 让装饰图随容器伸缩。切换上方 repeat 模式观察边段铺法。\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\nconst repeat = ref('round')\n\nconst boxStyle = computed(() => ({\n  borderImage: `url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 ${repeat.value}`,\n}))\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.stage {\n  padding: 24px;\n  background: #f0f0f0;\n  border-radius: 12px;\n}\n\n.toolbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 16px;\n  font-size: 14px;\n  color: #374151;\n}\n\n.toolbar select {\n  padding: 4px 8px;\n  border-radius: 6px;\n  border: 1px solid #d1d5db;\n}\n\n.box {\n  box-sizing: border-box;\n  border: 50px solid transparent;\n  background: #111;\n  color: #fff;\n  padding: 20px;\n  line-height: 1.7;\n  font-size: 15px;\n}\n\u003C\u002Fstyle>\n",[18,1922,1923,1931,1945,1961,1966,1983,2006,2025,2045,2053,2061,2084,2089,2097,2105,2113,2117,2129,2143,2147,2168,2172,2193,2214,2219,2227,2231,2241,2247,2259,2270,2282,2286,2290,2297,2308,2319,2333,2347,2359,2370,2374,2378,2387,2404,2417,2434,2438,2442,2448,2459,2475,2485,2495,2507,2517,2529,2533],{"__ignoreMap":96},[100,1924,1925,1927,1929],{"class":102,"line":103},[100,1926,682],{"class":110},[100,1928,686],{"class":685},[100,1930,689],{"class":110},[100,1932,1933,1935,1937,1939,1941,1943],{"class":102,"line":114},[100,1934,694],{"class":110},[100,1936,697],{"class":685},[100,1938,700],{"class":106},[100,1940,703],{"class":110},[100,1942,707],{"class":706},[100,1944,689],{"class":110},[100,1946,1947,1949,1952,1954,1956,1959],{"class":102,"line":135},[100,1948,714],{"class":110},[100,1950,1951],{"class":685},"label",[100,1953,700],{"class":106},[100,1955,703],{"class":110},[100,1957,1958],{"class":706},"\"toolbar\"",[100,1960,689],{"class":110},[100,1962,1963],{"class":102,"line":169},[100,1964,1965],{"class":110},"      border-image-repeat\n",[100,1967,1968,1970,1973,1976,1978,1981],{"class":102,"line":184},[100,1969,730],{"class":110},[100,1971,1972],{"class":685},"select",[100,1974,1975],{"class":106}," v-model",[100,1977,703],{"class":110},[100,1979,1980],{"class":706},"\"repeat\"",[100,1982,689],{"class":110},[100,1984,1985,1988,1991,1994,1996,1999,2002,2004],{"class":102,"line":224},[100,1986,1987],{"class":110},"        \u003C",[100,1989,1990],{"class":685},"option",[100,1992,1993],{"class":106}," value",[100,1995,703],{"class":110},[100,1997,1998],{"class":706},"\"round\"",[100,2000,2001],{"class":110},">round\u003C\u002F",[100,2003,1990],{"class":685},[100,2005,689],{"class":110},[100,2007,2008,2010,2012,2014,2016,2018,2021,2023],{"class":102,"line":231},[100,2009,1987],{"class":110},[100,2011,1990],{"class":685},[100,2013,1993],{"class":106},[100,2015,703],{"class":110},[100,2017,1980],{"class":706},[100,2019,2020],{"class":110},">repeat\u003C\u002F",[100,2022,1990],{"class":685},[100,2024,689],{"class":110},[100,2026,2027,2029,2031,2033,2035,2038,2041,2043],{"class":102,"line":245},[100,2028,1987],{"class":110},[100,2030,1990],{"class":685},[100,2032,1993],{"class":106},[100,2034,703],{"class":110},[100,2036,2037],{"class":706},"\"stretch\"",[100,2039,2040],{"class":110},">stretch\u003C\u002F",[100,2042,1990],{"class":685},[100,2044,689],{"class":110},[100,2046,2047,2049,2051],{"class":102,"line":270},[100,2048,751],{"class":110},[100,2050,1972],{"class":685},[100,2052,689],{"class":110},[100,2054,2055,2057,2059],{"class":102,"line":285},[100,2056,760],{"class":110},[100,2058,1951],{"class":685},[100,2060,689],{"class":110},[100,2062,2063,2065,2067,2069,2071,2074,2077,2079,2082],{"class":102,"line":294},[100,2064,714],{"class":110},[100,2066,697],{"class":685},[100,2068,700],{"class":106},[100,2070,703],{"class":110},[100,2072,2073],{"class":706},"\"box\"",[100,2075,2076],{"class":106}," :style",[100,2078,703],{"class":110},[100,2080,2081],{"class":706},"\"boxStyle\"",[100,2083,689],{"class":110},[100,2085,2086],{"class":102,"line":317},[100,2087,2088],{"class":110},"      border-image 让装饰图随容器伸缩。切换上方 repeat 模式观察边段铺法。\n",[100,2090,2091,2093,2095],{"class":102,"line":326},[100,2092,760],{"class":110},[100,2094,697],{"class":685},[100,2096,689],{"class":110},[100,2098,2099,2101,2103],{"class":102,"line":337},[100,2100,769],{"class":110},[100,2102,697],{"class":685},[100,2104,689],{"class":110},[100,2106,2107,2109,2111],{"class":102,"line":355},[100,2108,778],{"class":110},[100,2110,686],{"class":685},[100,2112,689],{"class":110},[100,2114,2115],{"class":102,"line":392},[100,2116,228],{"emptyLinePlaceholder":227},[100,2118,2119,2121,2124,2127],{"class":102,"line":422},[100,2120,682],{"class":110},[100,2122,2123],{"class":685},"script",[100,2125,2126],{"class":106}," setup",[100,2128,689],{"class":110},[100,2130,2131,2134,2137,2140],{"class":102,"line":455},[100,2132,2133],{"class":128},"import",[100,2135,2136],{"class":110}," { computed, ref } ",[100,2138,2139],{"class":128},"from",[100,2141,2142],{"class":706}," 'vue'\n",[100,2144,2145],{"class":102,"line":497},[100,2146,228],{"emptyLinePlaceholder":227},[100,2148,2149,2152,2155,2158,2161,2163,2166],{"class":102,"line":503},[100,2150,2151],{"class":128},"const",[100,2153,2154],{"class":124}," repeat",[100,2156,2157],{"class":128}," =",[100,2159,2160],{"class":106}," ref",[100,2162,146],{"class":110},[100,2164,2165],{"class":706},"'round'",[100,2167,494],{"class":110},[100,2169,2170],{"class":102,"line":511},[100,2171,228],{"emptyLinePlaceholder":227},[100,2173,2174,2176,2179,2181,2184,2187,2190],{"class":102,"line":517},[100,2175,2151],{"class":128},[100,2177,2178],{"class":124}," boxStyle",[100,2180,2157],{"class":128},[100,2182,2183],{"class":106}," computed",[100,2185,2186],{"class":110},"(() ",[100,2188,2189],{"class":128},"=>",[100,2191,2192],{"class":110}," ({\n",[100,2194,2195,2198,2201,2203,2206,2209,2212],{"class":102,"line":522},[100,2196,2197],{"class":110},"  borderImage: ",[100,2199,2200],{"class":706},"`url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 ${",[100,2202,1808],{"class":110},[100,2204,2205],{"class":706},".",[100,2207,2208],{"class":110},"value",[100,2210,2211],{"class":706},"}`",[100,2213,314],{"class":110},[100,2215,2216],{"class":102,"line":530},[100,2217,2218],{"class":110},"}))\n",[100,2220,2221,2223,2225],{"class":102,"line":553},[100,2222,778],{"class":110},[100,2224,2123],{"class":685},[100,2226,689],{"class":110},[100,2228,2229],{"class":102,"line":558},[100,2230,228],{"emptyLinePlaceholder":227},[100,2232,2233,2235,2237,2239],{"class":102,"line":563},[100,2234,682],{"class":110},[100,2236,793],{"class":685},[100,2238,796],{"class":106},[100,2240,689],{"class":110},[100,2242,2243,2245],{"class":102,"line":573},[100,2244,803],{"class":106},[100,2246,111],{"class":110},[100,2248,2249,2251,2253,2255,2257],{"class":102,"line":581},[100,2250,234],{"class":124},[100,2252,121],{"class":110},[100,2254,125],{"class":124},[100,2256,129],{"class":128},[100,2258,132],{"class":110},[100,2260,2261,2263,2265,2268],{"class":102,"line":589},[100,2262,288],{"class":124},[100,2264,121],{"class":110},[100,2266,2267],{"class":124},"#f0f0f0",[100,2269,132],{"class":110},[100,2271,2272,2274,2276,2278,2280],{"class":102,"line":599},[100,2273,273],{"class":124},[100,2275,121],{"class":110},[100,2277,902],{"class":124},[100,2279,129],{"class":128},[100,2281,132],{"class":110},[100,2283,2284],{"class":102,"line":640},[100,2285,514],{"class":110},[100,2287,2288],{"class":102,"line":646},[100,2289,228],{"emptyLinePlaceholder":227},[100,2291,2292,2295],{"class":102,"line":1115},[100,2293,2294],{"class":106},".toolbar",[100,2296,111],{"class":110},[100,2298,2299,2301,2303,2306],{"class":102,"line":1124},[100,2300,810],{"class":124},[100,2302,121],{"class":110},[100,2304,2305],{"class":124},"flex",[100,2307,132],{"class":110},[100,2309,2310,2313,2315,2317],{"class":102,"line":1139},[100,2311,2312],{"class":124},"  align-items",[100,2314,121],{"class":110},[100,2316,827],{"class":124},[100,2318,132],{"class":110},[100,2320,2321,2324,2326,2329,2331],{"class":102,"line":1174},[100,2322,2323],{"class":124},"  gap",[100,2325,121],{"class":110},[100,2327,2328],{"class":124},"8",[100,2330,129],{"class":128},[100,2332,132],{"class":110},[100,2334,2335,2338,2340,2343,2345],{"class":102,"line":1201},[100,2336,2337],{"class":124},"  margin-bottom",[100,2339,121],{"class":110},[100,2341,2342],{"class":124},"16",[100,2344,129],{"class":128},[100,2346,132],{"class":110},[100,2348,2349,2351,2353,2355,2357],{"class":102,"line":1230},[100,2350,1669],{"class":124},[100,2352,121],{"class":110},[100,2354,278],{"class":124},[100,2356,129],{"class":128},[100,2358,132],{"class":110},[100,2360,2361,2363,2365,2368],{"class":102,"line":1269},[100,2362,1697],{"class":124},[100,2364,121],{"class":110},[100,2366,2367],{"class":124},"#374151",[100,2369,132],{"class":110},[100,2371,2372],{"class":102,"line":1274},[100,2373,514],{"class":110},[100,2375,2376],{"class":102,"line":1281},[100,2377,228],{"emptyLinePlaceholder":227},[100,2379,2380,2382,2385],{"class":102,"line":1302},[100,2381,2294],{"class":106},[100,2383,2384],{"class":685}," select",[100,2386,111],{"class":110},[100,2388,2389,2391,2393,2396,2398,2400,2402],{"class":102,"line":1310},[100,2390,234],{"class":124},[100,2392,121],{"class":110},[100,2394,2395],{"class":124},"4",[100,2397,129],{"class":128},[100,2399,1503],{"class":124},[100,2401,129],{"class":128},[100,2403,132],{"class":110},[100,2405,2406,2408,2410,2413,2415],{"class":102,"line":1351},[100,2407,273],{"class":124},[100,2409,121],{"class":110},[100,2411,2412],{"class":124},"6",[100,2414,129],{"class":128},[100,2416,132],{"class":110},[100,2418,2419,2421,2423,2425,2427,2429,2432],{"class":102,"line":1390},[100,2420,248],{"class":124},[100,2422,121],{"class":110},[100,2424,539],{"class":124},[100,2426,129],{"class":128},[100,2428,1842],{"class":124},[100,2430,2431],{"class":124}," #d1d5db",[100,2433,132],{"class":110},[100,2435,2436],{"class":102,"line":1418},[100,2437,514],{"class":110},[100,2439,2440],{"class":102,"line":1423},[100,2441,228],{"emptyLinePlaceholder":227},[100,2443,2444,2446],{"class":102,"line":1428},[100,2445,1826],{"class":106},[100,2447,111],{"class":110},[100,2449,2450,2453,2455,2457],{"class":102,"line":1435},[100,2451,2452],{"class":124},"  box-sizing",[100,2454,121],{"class":110},[100,2456,70],{"class":124},[100,2458,132],{"class":110},[100,2460,2461,2463,2465,2467,2469,2471,2473],{"class":102,"line":1455},[100,2462,248],{"class":124},[100,2464,121],{"class":110},[100,2466,1837],{"class":124},[100,2468,129],{"class":128},[100,2470,1842],{"class":124},[100,2472,265],{"class":124},[100,2474,132],{"class":110},[100,2476,2477,2479,2481,2483],{"class":102,"line":1462},[100,2478,288],{"class":124},[100,2480,121],{"class":110},[100,2482,1879],{"class":124},[100,2484,132],{"class":110},[100,2486,2487,2489,2491,2493],{"class":102,"line":1498},[100,2488,1697],{"class":124},[100,2490,121],{"class":110},[100,2492,302],{"class":124},[100,2494,132],{"class":110},[100,2496,2497,2499,2501,2503,2505],{"class":102,"line":1533},[100,2498,234],{"class":124},[100,2500,121],{"class":110},[100,2502,1900],{"class":124},[100,2504,129],{"class":128},[100,2506,132],{"class":110},[100,2508,2509,2511,2513,2515],{"class":102,"line":1550},[100,2510,1684],{"class":124},[100,2512,121],{"class":110},[100,2514,1689],{"class":124},[100,2516,132],{"class":110},[100,2518,2519,2521,2523,2525,2527],{"class":102,"line":1555},[100,2520,1669],{"class":124},[100,2522,121],{"class":110},[100,2524,1674],{"class":124},[100,2526,129],{"class":128},[100,2528,132],{"class":110},[100,2530,2531],{"class":102,"line":1560},[100,2532,514],{"class":110},[100,2534,2535,2537,2539],{"class":102,"line":1569},[100,2536,778],{"class":110},[100,2538,793],{"class":685},[100,2540,689],{"class":110},[34,2542,2543],{"id":2543},"小结",[50,2545,2546,2559],{},[53,2547,2548,2551,2552,2554,2555,2554,2557],{},[23,2549,2550],{},"无素材、要动效"," → 双层 ",[18,2553,47],{}," + ",[18,2556,74],{},[18,2558,80],{},[53,2560,2561,2564,2565,2567,2568,2571,2572,2574],{},[23,2562,2563],{},"有切图、要质感"," → ",[18,2566,31],{}," + 合适的 ",[18,2569,2570],{},"slice"," 与 ",[18,2573,1808],{}," 模式",[14,2576,2577],{},"两者可以组合：内容区用纯色或渐变，边框区分别用 CSS 条纹或图片切片。选哪种取决于设计稿有没有现成九宫格素材。",[793,2579,2580],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":96,"searchDepth":135,"depth":135,"links":2582},[2583,2584,2585],{"id":36,"depth":114,"text":37},{"id":1721,"depth":114,"text":1722},{"id":2543,"depth":114,"text":2543},"2026-05-15","用双层 background 实现会动的条纹边框，或用 border-image 切片装饰图做自适应边框。",false,"md",{},"\u002Fblog\u002Fcss-border-tricks",{"title":5,"description":2587},"blog\u002Fcss-border-tricks",[43,2595,31],"animation","8YZziFPovjlIbtJigRJMhVdL1HGrqD3ngLg-jPkvETc",1782309645710]