CSS中有多種方式可以使用虛線進行樣式設置,如下:
/* 設置單一虛線樣式 */ border-style: dashed; /* 實線虛線相間 */ border-style: dotted; /* 點狀虛線 */ border-style: double; /* 雙實線 */ border-style: groove; /* 3D凹槽邊框,由淺灰到深灰再到黑色實線 */ border-style: ridge; /* 3D凸出邊框,由深灰到淺灰再到黑色實線 */ border-style: inset; /* 3D內凹邊框 */ border-style: outset; /* 3D外凸邊框 */
如果需要設置復合樣式的虛線,可以使用border屬性進行設置,如下:
/* 設置復合虛線樣式 */ border: 2px dashed blue; /* 2px藍色實線虛線相間 */ border: 2px dotted red; /* 2px紅色點狀虛線 */ border: 4px double green; /* 4px綠色雙實線 */ border: 3px ridge #333; /* 3px黑色實線,從深灰到淺灰再到黑色實線 */ border: 1px groove #666; /* 1px黑色實線,從淺灰到深灰再到黑色實線 */ border: 2px inset #999; /* 2px灰色實線,3D內凹邊框 */ border: 2px outset #ccc; /* 2px淡灰色實線,3D外凸邊框 */
CSS中還可以使用outline屬性來設置虛線樣式,如下:
/* 設置元素虛線描邊 */ outline: 2px dashed pink; /* 2px粉色實線虛線相間 */ outline: 3px dotted orange; /* 3px橙色點狀虛線 */ outline: 4px double purple; /* 4px紫色雙實線 */
以上就是CSS中各種虛線樣式的設置方法。可以根據實際需求,選擇不同的虛線樣式來進行頁面的美化與優化。
上一篇css各種圖形大全
下一篇css同一個網頁不居中