如何用CSS定义虚线间隔 css 样式中怎么设置边框是圆点虚线之间的距离
\u53ef\u4ee5\u7528css\u63a7\u5236\u865a\u7ebf\u7684\u95f4\u8ddd\u5417\uff1f\u53ef\u4ee5\uff0c\u7ed9\u5b83\u7236\u7ea7\u52a0padding,\u6216\u8005\u4e2a\u5b83\u5b50\u96c6\u52a0margin\u4e5f\u884c\uff0c\u4e0d\u61c2\u5c31\u52a0\u6211\u4f01\u9e45\uff0c\u6211\u76f4\u63a5\u53d1\u7ed9\u4f60
\u5e0c\u671b\u91c7\u7eb3
\u8fd9\u4e2a\u6ca1\u6cd5\u8bbe\u7f6e,\u60f3\u8bbe\u7f6e\u5706\u70b9\u4e4b\u95f4\u7684\u8ddd\u79bb\u7684\u8bdd\u8981\u4e48\u5c31\u7528ps\u53bb\u4f5c\u56fe,\u7136\u540e\u4f7f\u7528background\u5c5e\u6027,\u4f7f\u865a\u7ebf\u4f4d\u4e8e\u4e0b\u65b9.\u5982\u679c\u4f60\u53bb\u7ea0\u7ed3\u5706\u70b9\u865a\u7ebf\u76f4\u63a5\u7684\u8ddd\u79bb\u7684\u8bdd,\u76f4\u63a5border:1px dotted #ccc;\u641e\u5b9a
在正式绘制边框前，我们先认识一下CSS3 border-image-slice 属性，它可以将border-image-source获取的边框背景图片切割为9份。语法如下：border-image:border-image-source slice-width{1,4}
slice-width的值可以是具体像素，也可以是百分比。切割后的图片块分别是
border-top-left-image border-top-image border-top-right-image
border-left-image border-right-image
border-bottom-left-image border-bottom-image border-bottom-right-image
其中，border-top-image和border-bottom-image区域受到水平方向效果影响，如果是repeat则此区域图片会水平重复，如果是round则会水平平铺，责任stretch则被水平拉升。而我们设置虚线，则选择repeat/round都可以。
css是没办法设置虚线间距的
SVG线条是可以设置间距的
path {
stroke-dasharray: 4;
stroke-dashoffset: 22;
}
CSS 的 border: 1px dashed 虚线的宽
绛旓細鍦姝ｅ紡缁樺埗杈规鍓嶏紝鎴戜滑鍏堣璇嗕竴涓CSS3 border-image-slice 灞炴э紝瀹冨彲浠ュ皢border-image-source鑾峰彇鐨勮竟妗嗚儗鏅浘鐗囧垏鍓蹭负9浠姐傝娉曞涓嬶細border-image:border-image-source slice-width{1,4} slice-width鐨勫煎彲浠ユ槸鍏蜂綋鍍忕礌锛屼篃鍙互鏄櫨鍒嗘瘮銆傚垏鍓插悗鐨勫浘鐗囧潡鍒嗗埆鏄 border-top-left-imageborder-top-image...
绛旓細浣跨敤css杈规鏉ュ畾涔夎櫄绾匡紝骞跺css鐩掑瓙杩涜涓婁笅鎴栧乏鍙冲～鍏呮潵瀹炵幇铏氱嚎闂撮殧锛岃繖鏄渶绠鍗曘鐨勬柟娉曪紟涔熷彲浠ヤ娇鐢╟ss瀹氫箟鑳屾櫙鐨勬柟寮忥紟
绛旓細鏈绗ㄧ殑鏂规硶鏄仛涓浘鐗囪儗鏅傘傘傜劧鍚庤皟鐢ㄨ繖涓儗鏅傘傚畬鍏ㄦ墜宸ヨ嚜瀹氫箟銆傘傛兂澶氬ぇ澶氬ぇ銆傘傛湡寰呴珮鎵嬭В鍐炽傘傚叧娉ㄤ腑銆傘
绛旓細濡傛灉鎮ㄥ彧鎯宠缃〃鏍肩殑鏌愪竴杈规锛屽彲浠ヤ娇鐢╞order-top銆乥order-right銆乥order-bottom鍜宐order-left灞炴с備緥濡傦紝涓嬮潰鐨凜SS浠ｇ爜灏嗚缃〃鏍奸《閮ㄨ竟妗嗕负2鍍忕礌瀹界殑铏氱嚎杈规锛岄鑹蹭负绾㈣壊锛歚``table{ border-top:2pxdashedred;} ```璁剧疆鍗曞厓鏍闂磋窛 瑕佽缃崟鍏冩牸闂磋窛锛屾垜浠彲浠浣跨敤CSS鐨border-spacing灞炴с俠order-sp...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv {height:60px;border-bottom:1px dashed}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃閫氳繃css瀹氫箟浜嗕竴涓按骞崇殑铏氱嚎銆
绛旓細1銆鍦html骞舵病鏈夌洿鎺瀹氫箟铏氱嚎鐨勬爣绛俱2銆佽繖鏃跺欏氨闇瑕浣跨敤鍏朵粬鏂规硶寰楀埌銆3銆佸叿浣撴柟娉曟槸锛氭垜浠煡閬撳湪html涓爣绛剧殑杈规鍙互璁剧疆涓鸿櫄绾裤4銆佹墍浠ュ彲浠ュ厛鍒涘缓涓涓爣绛:銆5銆佺劧鍚庡皢璇ヨ竟妗嗙殑楂樺害璁剧疆涓0锛屽皢涓婅竟妗嗘垨鑰呬笅杈规鍏朵腑涓涓缃负涓涓儚绱犵殑铏氱嚎銆6銆佸叿浣撳涓嬶細#xuxian{width:100%;height:0;border...
绛旓細dashed : 銆鍦MAC骞冲彴涓奍E4+涓嶹INDOWS鍜孶NIX骞冲彴涓奍E5.5+涓铏氱嚎銆傚惁鍒欎负瀹炵嚎 solid : 銆瀹炵嚎杈规 double : 銆鍙岀嚎杈规銆備袱鏉″崟绾夸笌鍏闂撮殧鐨勫拰绛変簬鎸囧畾鐨刡order-width鍊 groove : 銆鏍规嵁border-color鐨勫肩敾3D鍑规Ы ridge : 銆鏍规嵁border-color鐨勫肩敾鑿卞舰杈规 inset : 銆鏍规嵁border-color鐨勫肩敾3D鍑...
绛旓細鐗堟湰锛CSS3 JavaScript 璇硶锛歰bject.style.columnRuleStyle="dotted"璇硶 column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;鍊兼弿杩版祴璇 none瀹氫箟娌℃湁瑙勫垯銆傛祴璇 hidden瀹氫箟闅愯棌瑙勫垯銆傛祴璇 dotted瀹氫箟鐐圭姸瑙勫垯銆傛祴璇 dashed瀹氫箟铏氱嚎瑙勫垯銆傛祴璇 solid瀹氫箟瀹炵嚎瑙勫垯銆傛祴璇 doub...
绛旓細鍦–SS 涓父瑙佺殑杈规(border) 灞炴ф湁浠ヤ笅鍑犵锛歜order-style border-width border-color border-top-, border-left-, border-bottom-, border-right- border border-styleborder-style灞炴ф寚瀹氳竟妗嗙殑鏍峰紡銆備互涓嬬殑琛ㄦ牸鍒楀嚭杩欎釜灞炴у彲鑳芥湁鐨勫硷紝浠ュ強姣忎竴涓兼樉鐜板嚭鏉ョ殑缁撴灉銆俠order-widthborder-width灞炴ф槸...
绛旓細border-style锛歞otted锛岄偅涓槸杈规鐨勪竴绉嶅舰寮忥紝姣斿鍦div鍜宒iv涔嬮棿闇瑕铏氱嚎鐨勮瘽鍙互鎶婄敓涓涓猟iv鐨勫簳閮ㄨ缃竴涓櫄绾胯竟妗嗭紝濡傛灉鏄垪琛ㄥ瓧涔嬮棿鍙互缁檒i璁剧疆鎴愬簳閮ㄨ竟妗嗘槸铏氱嚎鐨
