小程序中常常需要使用虛線作為分割線或者邊框,在CSS中我們可以使用border-style屬性來設置虛線,border-style屬性可以設置為dotted(點狀虛線),dashed(劃痕狀虛線)以及double(兩條線)等。
/* 設置1px的點狀虛線邊框 */ .border{ border: 1px dotted #000; } /* 設置2px的劃痕狀虛線邊框 */ .border{ border: 2px dashed #000; } /* 設置1px的實線邊框和虛線邊框 */ .border{ border: 1px solid #000; border-style: dotted; }
小程序中還可以使用border-bottom屬性來設置虛線的下劃線,這在一些標題和文字之間的分割中非常常見。
/* 設置1px的點狀虛線下劃線 */ .text{ border-bottom: 1px dotted #000; } /* 設置2px的劃痕狀虛線下劃線 */ .text{ border-bottom: 2px dashed #000; } /* 設置1px的實線下劃線和虛線下劃線 */ .text{ border-bottom: 1px solid #000; border-bottom-style: dotted; }
CSS中還可以使用outline屬性來設置元素的虛線邊框,outline和border的區別在于,outline不占用元素的實際空間,不會影響到元素的大小和位置。
/* 設置1px的點狀虛線輪廓 */ .text{ outline: 1px dotted #000; } /* 設置2px的劃痕狀虛線輪廓 */ .text{ outline: 2px dashed #000; } /* 設置1px的實線輪廓和虛線邊框 */ .text{ outline: 1px solid #000; outline-style: dotted; }
以上就是小程序中常見的虛線設置方法,希望對你有所幫助。
上一篇jquery 數量加一
下一篇jquery 數組合并