Vue美化文字链接（超链接）

基础样式美化链接

<template><div><a href="https://www.example.com" target="_blank" class="basic-link">访问 Example 网站</a></div>
</template><style scoped>
.basic-link {color: #3498db;text-decoration: none;font-weight: bold;
}
.basic-link:hover {color: #e74c3c;text-decoration: underline;
}
</style>

渐变文字链接

<template><div><a href="#" class="gradient-link">炫彩链接</a></div>
</template><style scoped>
.gradient-link {background: linear-gradient(to right, #ff6a00, #ee0979);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: bold;text-decoration: none;
}
</style>

放大动画效果

<template><div><a href="#" class="scale-link">放大链接</a></div>
</template><style scoped>
.scale-link {display: inline-block;transition: transform 0.3s ease;text-decoration: none;color: #2c3e50;
}
.scale-link:hover {transform: scale(1.1);
}
</style>

下划线滑入动画

<template><div><a href="#" class="underline-slide">滑入下划线</a></div>
</template><style scoped>
.underline-slide {position: relative;text-decoration: none;color: #333;
}
.underline-slide::after {content: '';position: absolute;width: 0%;height: 2px;bottom: 0;left: 0;background-color: #333;transition: width 0.3s;
}
.underline-slide:hover::after {width: 100%;
}
</style>

彩色边框链接

<template><div><a href="#" class="border-link">边框链接</a></div>
</template><style scoped>
.border-link {padding: 5px 10px;border: 2px solid #8e44ad;border-radius: 5px;color: #8e44ad;text-decoration: none;transition: all 0.3s ease;
}
.border-link:hover {background-color: #8e44ad;color: white;
}
</style>

<template><div><router-link to="/about" class="nav-link">关于我们</router-link></div>
</template><style scoped>
.nav-link {color: #2c3e50;font-size: 18px;text-decoration: none;transition: color 0.3s ease;
}
.nav-link:hover {color: #f39c12;
}
</style>

极简灰色链接

<template><div><a href="#" class="minimal-link">极简链接</a></div>
</template><style scoped>
.minimal-link {color: #555;text-decoration: none;font-size: 16px;
}
.minimal-link:hover {color: #000;
}
</style>

适合正文内嵌链接，低调但清晰。

极简天蓝色链接

<template><div><a href="#" class="minimal-link">极简链接</a></div>
</template><style scoped>
.minimal-link {color: #409EFF;text-decoration: none;font-size: 16px;
}
</style>

细线下划线链接

<template><div><a href="#" class="underline-link">细线链接</a></div>
</template><style scoped>
.underline-link {color: #333;text-decoration: none;border-bottom: 1px solid #ccc;padding-bottom: 2px;
}
.underline-link:hover {border-color: #333;
}
</style>

轻微强调但不抢眼，适合导航或目录。

小圆角按钮式链接

<template><div><a href="#" class="pill-link">按钮风链接</a></div>
</template><style scoped>
.pill-link {display: inline-block;padding: 6px 12px;border-radius: 20px;background-color: #f5f5f5;color: #333;text-decoration: none;font-size: 14px;
}
.pill-link:hover {background-color: #e0e0e0;
}
</style>

像按钮但更轻盈，适合标签或操作项。

字体加粗 + 无装饰

<template><div><a href="#" class="bold-link">加粗链接</a></div>
</template><style scoped>
.bold-link {font-weight: 600;color: #222;text-decoration: none;
}
.bold-link:hover {color: #000;
}
</style>

适合强调但不花哨的链接文字。