CSS3脚注效果
脚注是向用户提供更多信息的一个最佳途径,也是主体信息的一个有效补充,常见于各种印刷书籍中。不过,既然脚注有这些好处,我们当然要在网页中也加以利用,本文向您介绍了用CSS3实现脚注效果的方法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> @keyframes ants{100%{background-position:100%;}} #tt{ width:560px; height: 30px; padding-top:1em; color:tan; border-top: .2em solid transparent; border-image: 100% 0 0 linear-gradient(90deg,currentColor 4em,transparent 0); } </style> </head> <body> <div id="tt">脚注效果:由于使用了currentColor,它会根据color属性的变化而自动适应</div> </body> </html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知