CSS3中添加線的方法比較多,可以用border、text-decoration、偽元素等實現。
首先介紹border屬性,我們可以通過給元素添加邊框來實現線條效果。例如:
.border-line{ border-bottom: 1px solid #000; }
這樣就可以給一個元素添加一條下劃線了。
text-decoration屬性也可以用來添加下劃線或者中劃線。通過設置text-decoration為underline或line-through,可以分別添加下劃線和中劃線。例如:
.underline{ text-decoration: underline; } .strikethrough{ text-decoration: line-through; }
偽元素也是一個實用的添加線條的方法。
使用before或after偽元素,將它們的content設置為空字符串“”,并設置border或background屬性來實現線條的效果。例如:
.pseudo-line::before{ content: ""; display: block; height: 1px; width: 100%; background-color: #000; }
以上代碼可以給一個元素添加一條橫線,下劃線和豎線也可以類似實現。
綜上所述,CSS3中添加線的方法有很多種,可以根據具體的需求選擇使用。如果需要在多個元素中添加相同的線條效果,可以定義一個通用的class來應用到不同的元素中。
上一篇css3實現粒子碰撞效果
下一篇css3實現縮小進入