在css3里border-image:url(border.png) 30 30 round的30,30，表示什么意思？ CSS3 border-image的使用方法！那位大哥大姐教...
border-image \u53c2\u6570\u4ec0\u4e48\u610f\u601d\u554a \u7279\u522b\u662f\u8bbe\u4e3a30 \u7684\u4e24\u4e2aborder-image \u7528 image \u505a\u8fb9\u754c\uff0c
\u4e09\u4e2a\u53c2\u6570\uff0c\uff081\uff09\u56fe\u7247\u7684URL\u5730\u5740\uff0c \u4f8b\u5982\uff1a url(my-image.gif)
(2) \u56fe\u7247\u7684\u5bbd\u5ea6\u3002 30 \u662f \u5bbd\u5ea6\uff0c\u5355\u4f4d\u662f\u50cf\u7d20\u3002\u4e5f\u53ef\u7528 \u767e\u5206\u6bd4\u3002
\uff083\uff09\u56fe\u7247\u53e0\u653e\u65b9\u6cd5
Repeat -- \u91cd\u590d\uff0c Round -- \u53d6\u6574\u6570\u4e2a\u6570\uff0c\u5141\u8bb8\u7565\u4e3a\u62c9\u4f38\uff0c\u5145\u6ee1\u5bbd\u5ea6,
Stretch -- \u62c9\u4f38
border-image\u4e8e\u6b64\u7c7b\u4f3c\uff0cborder-image\u5305\u62ec\u56fe\u7247\uff0c\u526a\u88c1\u4f4d\u7f6e\uff08\u4e0ebackground\u4f4d\u7f6e\u4e00\u6837\uff0c\u4e5f\u662f\u6570\u503c\uff0c\u4e5f\u652f\u6301\u767e\u5206\u503c\uff09\uff0c\u91cd\u590d\u6027\u3002\u4f8b\u5982\uff1aborder-image:url(border.png) 27 repeat;\uff0c\u6307\u7684\u5c31\u662f\u56fe\u7247(url(border.png))\uff0c\u526a\u88c1\u4f4d\u7f6e(27)\uff0c\u91cd\u590d\u65b9\u5f0f(repeat)\u3002\u8bd5\u7740\u5bf9\u6bd4background\uff0c\u8fd9\u6709\u52a9\u4e8eborder-image\u5c5e\u6027\u7684\u8bb0\u5fc6\u3002
border-image\u7684\u53c2\u6570\u5c31\u662f\u4e0a\u9762\u63d0\u5230\u7684\u4e09\u4e2a\uff1a\u56fe\u7247\uff0c\u526a\u88c1\u4f4d\u7f6e\uff0c\u91cd\u590d\u6027\u3002
1\u3001\u56fe\u7247(border-image-source)
\u4e0eCSS2\u4e2dbackground-image\u5c5e\u6027\u4e00\u6837\uff0cborder-image\u7684\u80cc\u666f\u56fe\u4f7f\u7528url()\u8c03\u7528\uff0c\u56fe\u7247\u53ef\u4ee5\u662f\u76f8\u5bf9\u8def\u5f84\u6216\u662f\u7edd\u5bf9\u8def\u5f84\uff0c\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528\u56fe\u7247\uff0c\u5373border-image:none;
2\u3001\u56fe\u7247\u526a\u88c1\u4f4d\u7f6e(border-image-slice)
\u6b64\u53c2\u6570\u7279\u70b9\u6bd4\u8f83\u9c9c\u660e\uff1a
1\u3001\u6ca1\u6709\u5355\u4f4d\uff0c\u4e13\u6307\u50cf\u7d20\u3002\u8fd9\u7c7b\u4f3c\u4e8eflash\u7684as\u811a\u672c\uff0c\u821e\u53f0\u9ad8\u5bbd\uff0c\u5f71\u7247\u526a\u8f91\u5927\u5c0f\uff0c\u4f4d\u79fb\u76f4\u63a5\u5c31\u662f\u4e00\u4e2a\u6570\u503c\uff0c\u6ca1\u6709\u5355\u4f4d\uff0c\u56e0\u4e3a\u9ed8\u8ba4\u5355\u4f4d\u5c31\u662f\u50cf\u7d20(px)\u4e86\u3002\u4f8b\u5982\uff1aborder-image:url(border.png) 27 repeat;\u8fd9\u91cc\u768427\u4e13\u630727\u50cf\u7d20\u3002
2\u3001\u652f\u6301\u767e\u5206\u6bd4\u503c\uff0c\u767e\u5206\u6bd4\u503c\u5927\u5c0f\u4e8b\u76f8\u5bf9\u4e8e\u8fb9\u6846\u56fe\u7247\u800c\u8a00\uff0c\u5047\u8bbe\u8fb9\u6846\u56fe\u7247\u5927\u5c0f\u4e3a400px*300px\uff0c\u521920%\u7684\u5b9e\u9645\u6548\u679c\u5c31\u662f\u526a\u88c1\u4e86\u56fe\u7247\u768460px 80px 60px 80px\u7684\u56db\u8fb9\u5927\u5c0f\u3002
3\u3001\u526a\u88c1\u7279\u6027\u3002\u5982\u679c\u60a8\u5bf9CSS\u4e2dclip\u5c5e\u6027(clip:rect(auto, auto, auto, auto))\u6bd4\u8f83\u4e86\u89e3\uff0c\u5219\u8fd9\u91cc\u7406\u89e3\u5c31\u4f1a\u8f7b\u677e\u4e9b\u3002clip\u53ef\u4ee5\u8bf4\u662fCSS\u4e2d\u4e00\u4e2a\u660e\u76ee\u5f20\u80c6\u7684\u526a\u88c1\u5c5e\u6027\uff0c\u800c\u6b64\u5904\u7684\u5c5e\u6027\u867d\u7136\u8868\u610f\u4e0a\u4e0d\u662f\u526a\u88c1\uff0c\u4f46\u662f\u5728border-image\u6548\u679c\u7684\u5b9e\u73b0\u4e0a\u6765\u8bf4\uff0c\u5c31\u597d\u50cf\u662f\u4e2a\u526a\u88c1\u5de5\u5177\uff0c\u628a\u8fb9\u6846\u56fe\u7247\u56db\u5206\u4e94\u88c2\uff0c\u518d\u91cd\u65b0\u5b89\u7f6e\uff0c\u53d8\u5f62\u3002\u5176\u67091~4\u4e2a\u53c2\u6570\uff0c\u5176\u65b9\u4f4d\u89c4\u5219\u7b26\u5408CSS\u666e\u904d\u7684\u65b9\u4f4d\u89c4\u5219\uff08\u4e0emargin\uff0cpadding\u7b49\u6216border-width\u4e00\u81f4\uff09\uff0c\u4e0a\u53f3\u4e0b\u5de6\u987a\u65f6\u9488\uff0c\u518d\u8d4b\u4e88\u526a\u88c1\u7684\u542b\u4e49\uff0c\u4e3e\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\uff0c\u524d\u9762\u63d0\u5230\uff0c\u652f\u6301\u767e\u5206\u6bd4\u5bbd\u5ea6\uff0c\u6240\u4ee5\u8fd9\u91cc\u201c30% 35% 40% 30%\u7684\u201d\u793a\u610f\u53ef\u4ee5\u7528\u4e0b\u56fe\u8868\u793a\uff1a
\u770b\u56fe\u8bf4\u8bdd\u5c31\u662f\uff0c\u79bb\u56fe\u7247\u4e0a\u90e830%\u7684\u5730\u65b9\u526a\u88c1\u4e00\u4e0b\uff0c\u5728\u53f3\u8fb935%\u7684\u5730\u65b9\u526a\u88c1\u4e00\u4e0b\uff0c\u5728\u79bb\u5e95\u90e840%\u7684\u5730\u65b9\u88c1\u526a\u4e00\u4e0b\uff0c\u5728\u8ddd\u5de6\u8fb930%\u7684\u5730\u65b9\u4e5f\u526a\u88c1\u4e00\u4e0b\u3002\u4e8e\u662f\u603b\u5171\u5bf9\u56fe\u7247\u8fdb\u884c\u4e86\u201c\u56db\u5200\u5207\u201d\uff0c\u5f62\u6210\u4e86\u4e5d\u4e2a\u5206\u79bb\u7684\u533a\u57df\uff0c\u8fd9\u5c31\u662f\u4e5d\u5bab\u683c\uff0c\u8fd9\u662f\u4e0b\u9762\u6df1\u5165\u8bb2\u89e3border-image\u7684\u57fa\u7840\u3002
3\u3001\u91cd\u590d\u6027(border-image-repeat)
\u8fd9\u91cc\u7684\u91cd\u590d\u6027\u6709\u522b\u4e8ebackground\u7684\u80cc\u666f\u91cd\u590d\uff0c\u5dee\u522b\u8f83\u5927\u3002background\u56fe\u7247\u5c31\u662f\u91cd\u590d\uff0c\u4e0d\u91cd\u590d\uff0c\u6c34\u5e73\u91cd\u590d\uff0c\u5782\u76f4\u91cd\u590d\uff0c\u603b\u4e4b\u5c31\u662f\u56f4\u7ed5repeat\uff08\u91cd\u590d\uff09\u8fd9\u4e2a\u8bcd\u6253\u8f6c\uff0c\u4e00\u5bb6\u72ec\u5927\u3002\u800c\u5bf9\u4e8eborder-image\uff0c\u53ef\u8c13\u662f\u4e09\u8db3\u9f0e\u7acb\uff0crepeat\uff08\u91cd\u590d\uff09\u53ea\u662f\u5176\u4e2d\u4e4b\u4e00\uff0c\u5176\u4f59\u4e24\u4e2a\u662fround\uff08\u5e73\u94fa\uff09\u548cstretch\uff08\u62c9\u4f38\uff09\u3002\u5176\u4e2d\uff0cstretch\u662f\u9ed8\u8ba4\u503c\u3002
\u53c2\u65700~2\u4e2a\uff0c0\u5219\u4f7f\u7528\u9ed8\u8ba4\u503c \u2013 stretch\uff0c\u4f8b\u5982\uff1aborder-image:url(border.png) 30% 40%;\u5c31\u7b49\u540c\u4e8eborder-image:url(border.png) 30% 40% stretch stretch;\uff1b1\u5219\u8868\u793a\u6c34\u5e73\u65b9\u5411\u53ca\u5782\u76f4\u65b9\u5411\u5747\u4f7f\u7528\u6b64\u53c2\u6570\uff1b2\u4e2a\u53c2\u6570\u7684\u8bdd\u5219\u7b2c\u4e00\u4e2a\u53c2\u6570\u8868\u6c34\u5e73\u65b9\u5411\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u8868\u793a\u5782\u76f4\u65b9\u5411\u3002\u4f8b\u5982\uff1aborder-image:url(border.png) 30% 40%;\u5c31\u7b49\u540c\u4e8eborder-image:url(border.png) 30% 40% round repeat;\u8868\u793a\u6c34\u5e73\u65b9\u5411round\uff08\u5e73\u94fa\uff09\uff0c\u5782\u76f4\u65b9\u5411repeat\uff08\u91cd\u590d\uff09\uff0c\u81f3\u4e8e\u4f55\u4e3a\u5e73\u94fa\u4f55\u4e3a\u91cd\u590d\u4e0b\u9762\u4f1a\u6df1\u5165\u8bb2\u89e3\u3002
\u4e09\u3001\u6df1\u5165\u7406\u89e3border-image\u7684\u5bbd\u5ea6\u548c\u5c55\u793a\u65b9\u5f0f
\u5206\u5f00\u7406\u89e3border-image\u7684\u5bbd\u5ea6\u6216\u662f\u5c55\u793a\u65b9\u5f0f\u5176\u5b9e\u4e0d\u592a\u96be\u7684\uff0c\u5173\u952e\u662f\u8fd9\u4e24\u8005\u7ed3\u5408\u4f7f\u7528\u65f6\u5019\u7684\u542b\u4e49\uff0c\u9700\u8981\u82b1\u4e00\u5b9a\u7684\u529f\u592b\u7684\u7406\u89e3\u3002
\u5e2e\u52a9\u7406\u89e3\u7684\u4e5d\u5bab\u683c\u6a21\u578b
\u4f55\u4e3a\u4e5d\u5bab\u683c\uff1f\u4e3a\u4ec0\u4e48\u6211\u4eec\u9700\u8981\u4e5d\u5bab\u683c\u5e2e\u52a9\u7406\u89e3\uff1f
\u201c\u4e5d\u5bab\u683c\u201d\u662f\u6211\u56fd\u4e66\u6cd5\u53f2\u4e0a\u4e34\u5e16\u5199\u4eff\u7684\u4e00\u79cd\u754c\u683c\uff0c\u53c8\u53eb\u201c\u4e5d\u65b9\u683c\u201d\uff0c\u5373\u5728\u7eb8\u4e0a\u753b\u51fa\u82e5\u5e72\u5927\u65b9\u6846\uff0c\u518d\u4e8e\u6bcf\u4e2a\u65b9\u6846\u5185\u5206\u51fa\u4e5d\u4e2a\u5c0f\u65b9\u683c\uff0c\u4ee5\u4fbf\u5bf9\u7167\u6cd5\u5e16\u8303\u5b57\u7684\u7b14\u753b\u90e8\u4f4d\u8fdb\u884c\u7ec3\u5b57\u3002\u5728\u672c\u6587\uff0c\u201c\u4e5d\u5bab\u683c\u201d\u5c31\u4e13\u6307\u7531\u4e5d\u4e2a\u65b9\u683c\u5f62\u6210\u7684\u77e9\u5f62\u5e03\u5c40\uff0c\u4f8b\u5982\u5de6\u56fe\u5c31\u662f\u4e00\u4e2a\u5f88\u7b80\u5355\u7684\u6570\u5b57\u4e5d\u5bab\u683c\u3002
border-image\u7684\u6570\u503c\u53c2\u6570\u5176\u5b9e\u662f\u7528\u6765\u526a\u88c1\u8fb9\u6846\u56fe\u7247\u7684\uff0c\u6b63\u597d\u201c\u54d7\u54d7\u56db\u5200\u201d\u5207\u51fa\u4e86\u4e2a\u4e5d\u5bab\u683c\u7684\u6a21\u578b\uff0c\u6240\u4ee5\uff0c\u6709\u610f\u6216\u65e0\u610f\uff0c\u5de7\u5408\u8fd8\u662f\u5fc5\u7136\uff0c\u6211\u4eec\u9700\u8981\u7528\u5230\u4e5d\u5bab\u683c\u6a21\u578b\u5e2e\u52a9\u6211\u4eec\u7406\u89e3border-image\u7684\u7ed8\u5236\u539f\u7406\u3002\u4e0b\u9762\u8fd9\u5f20\u56fe\u662f\u672c\u6587\u975e\u5e38\u91cd\u8981\u7684\u57fa\u672c\u7684\u793a\u610f\u56fe\uff0c\u56e0\u4e3a\u8fd9\u662f\u5f20\u5177\u6709\u4ee3\u8868\u6027\u7684\u4e5d\u5bab\u683c\u56fe\u6848(27*3)*(27*3)\u3002
其实应该是四个值30 30 30 30（上右下左），简写为两个30分别表示“上下”“左右”两个位置，这个是border-image-slice（图片边框向内偏移）这个属性的参数，利用这个属性的图片你应该注意一下图片的样式。必须是
这种样子的，不能是普通的图片，这个就是图片向内的偏移量，这个偏移量的最正常的值就是每个小块的宽度，当然也可以不用这样，但是也需要找个合适的值，这个合适的值根据不同的背景图是不一样的，这个需要自己多做几个图片，改成不同的值试一下，希望对你有帮助，不懂请继续追问，解决请采纳
其实应该是四个值30 30 30 30（上右下左），简写为两个30分别表示“上下”“左右”两个位置，这个是border-image-slice（图片边框向内偏移）这个属性的参数，利用这个属性的图片你应该注意一下图片的样式。
边框将border-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中间的内容区域。假设现在边框的宽度是27像素，则上面所说的九部分正如下图所表示的（放大400%）：
1、调用边框图片
border-image的url属性，通过相对或绝对路径链接图片。
2、边框图片的剪裁
border-image的数值参数剪裁边框图片，形成九宫格。
3、剪裁图片填充边框
边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。
4、执行重复属性
被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。
只有两个参数代表 前一个代表 上下 后一个再把左右
宽高，30,30代表宽跟高
