生活随笔
收集整理的這篇文章主要介紹了
CSS设置文字的划线
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS設置文字的劃線
? ? ? ? ? 文字加上下劃線、頂劃線和刪除線，在文檔中是經常使用的。
? ? ? ? ??CSS中通過設置文字的text-decoration屬性，來實現這些特殊的效果。
<span style="font-size:24px;"><html><head><title>文字下劃線、頂劃線，刪除線</title><style><!--p.one{text-decoration:underline;}p.two{text-decoration:overline;}p.three{text-decoration:line-through;}p.four{text-decoration:blink;}--></style></head><body><p class="one">下劃線文字，下劃線文字</p><p class="two">頂劃線文字，頂劃線文字</p><p class="three">刪除線文字，刪除線文字</p><p class="four">文字閃爍</p><p>正常文字對比</p></body>
</html>
</span>
? ? ? ? ??如上代碼，分別設置了文字的下劃線、頂劃線和刪除線的效果，此外，這里特殊的blink值，使得文字不斷的閃爍，但是，IE中不支持這個效果，Firefox卻支持的很好。
? ? ? ? ??有時候文字不僅僅有一種效果，同時又下劃線或者刪除線，此時，可以同時將兩個屬性值，同時賦值給text-decoration，并用空格分開。
<span style="font-size:24px;"><html><head><title>文字下劃線、頂劃線，刪除線</title><style><!--p.one{text-decoration:underline overline;}p.two{text-decoration:underline line-through;}p.three{text-decoration:overline line-through;}p.four{text-decoration:underline overline line-through;}--></style></head><body><p class="one">下劃線文字，頂劃線文字</p><p class="two">下劃線文字，刪除線文字</p><p class="three">頂劃線文字，刪除線文字</p><p class="four">三種效果同時</p></body>
</html>
</span>
? ? ? ? ??可以發現各種效果可以同時運用在同一行文字上，為頁面添加趣味性。
總結
以上是生活随笔為你收集整理的CSS设置文字的划线的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
