怎么設(shè)置 CSS border 虛線之間間隔（密度）
來(lái)源：極客頭條
怎么設(shè)置 CSS border 虛線之間間隔（密度）
標(biāo)簽：CSS ? ? 更新時(shí)間：2016-07-25 ? ?評(píng)分17.5 ? ?返回首頁(yè)
CSS border-style屬性中呜投，dashed 和 dotted 形成虛框間距是無(wú)法改變的，但是 CSS3 提供了 border-image 解決了設(shè)置 border 虛線間隔的問(wèn)題。
1、CSS3 border-image 屬性基礎(chǔ)語(yǔ)法
border-image:border-image-source [border-image-width]{1,4} [border-image-repeat]{0,2}
可以看出 border-image 的參數(shù)涉及三個(gè)方面：圖片瓣履，剪裁位置徙垫，重復(fù)性腾它。
屬性 描述 可能的值
border-image-source 設(shè)置背景圖片 可以使用絕對(duì)或相對(duì)URL地址指定邊框的背景圖片
border-image-width 設(shè)置邊框圖片的寬度乒裆。 可以是具體的像素（px），也可以是百分比（%）
border-image-repeat 設(shè)置背景圖片的鋪放方式 平鋪(repeated)奴璃、鋪滿(rounded)或拉伸(stretched)
例如：border-image:url(border.png) 27 repeat;悉默，指的就是圖片(url(border.png))，剪裁位置(27)苟穆，重復(fù)方式(repeat)抄课。
2、border-image 設(shè)置 CSS border 虛線間隔
在正式繪制邊框前雳旅，我們先認(rèn)識(shí)一下CSS3 border-image-slice 屬性跟磨，它可以將border-image-source獲取的邊框背景圖片切割為9份。語(yǔ)法如下：
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區(qū)域受到水平方向效果影響沦童，如果是repeat則此區(qū)域圖片會(huì)水平重復(fù)，如果是round則會(huì)水平平鋪叹话，責(zé)任stretch則被水平拉升偷遗。而我們?cè)O(shè)置虛線，則選擇repeat/round都可以驼壶。
3氏豌、border-image 繪制 CSS border 虛線邊框步驟
使用PS繪制邊框圖片如100*100px的矩形邊框圖片，切割為九宮格則每格像素為33px热凹。
實(shí)例代碼：
test
效果演示：
test
注意：只有border-top-image泵喘、border-bottom-image泪电、border-leftp-image和border-right-image四個(gè)區(qū)塊會(huì)受到repeat、round和stretch屬性值影響纪铺。因此相速，可以通過(guò)控制這四個(gè)圖片區(qū)域線段長(zhǎng)度，控制border虛線之間間隔鲜锚。
