CSS3脚注效果

时间：5年前阅读：4340

脚注是向用户提供更多信息的一个最佳途径，也是主体信息的一个有效补充，常见于各种印刷书籍中。不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用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,我们将及时处理。

微信扫码关注

更新实时通知

CSS3脚注效果

网友评论