CSS橫線的用途非常廣泛,可以用來分割頁面內容,美化文本和鏈接,甚至可以用來制作一些視覺效果,那么CSS橫線具體怎么實現呢?
/* 給文本添加下劃線 */ .text-underline { text-decoration: underline; } /* 給鏈接添加下劃線 */ a.underline { text-decoration: underline; } /* 給文本添加中劃線 */ .text-line-through { text-decoration: line-through; } /* 給鏈接添加中劃線 */ a.line-through { text-decoration: line-through; } /* 給文本添加刪除線 */ .text-line-through { text-decoration: line-through; } /* 給鏈接添加刪除線 */ a.line-through { text-decoration: line-through; } /* 定義一條橫線 */ .hr { border-top: 1px solid #000; } /* 橫線樣式 */ .hr-dotted { border-top-style: dotted; } .hr-dashed { border-top-style: dashed; } .hr-double { border-top-style: double; } .hr-thick { border-top-width: 3px; } /* 橫線位置 */ .hr-top { margin-top: 10px; } .hr-bottom { margin-bottom: 10px; }
通過上面的代碼,我們可以很容易地實現各種不同樣式和位置的CSS橫線。希望這篇文章對大家有所幫助。
上一篇css模板下載多個網頁
下一篇CSS模板素材圖片可愛