这几天我在进行某表单页面开发的时候，有一个需求是将描述该表单的文案放在表单顶部，并且能够解析出对应的超链接。效果如下:
其实思路很简单，从接口获取对应的文案内容，然后用正则来解析出
url字符串，将解析出的url放在a标签里就可以解决问题了。于是我按照思路完成了代码，效果如下：
CSS对应代码如下：
a:hover {
font-size: bold;
color: #3370ff;
}
a {
text-decoration: none;
color: #3370ff;
}
能够看见，当我的鼠标触碰到对应链接的时候(触发:hover)，链接加粗且变深蓝色。但由于我并未给文本设置宽度，所以在触发:hover时，字体加粗导致文本宽度变化，从而出现文本抖动效果。这种效果显然是影响用户体验的。那么问题来了，我该如何解决上述问题呢？ 首先来说，为了实现表单的通用性，我不能固定住文案的宽度。在网上搜索一番后，找到了一种比较巧妙的方法能够解决上述问题，即触发:hover的时候，用text-shadow 来代替 font-weight(text-shadow文档)。这样就可以巧妙的解决文本抖动的问题。
CSS对应代码如下：
a:hover {
text-shadow: 0 0 .65px #3370ff;
color: #3370ff;
}
a {
text-decoration: none;
color: #3370ff;
}
最终的效果如下：
效果完美实现！
如果大家遇见类似的问题，可以使用text-shadow来解决问题，当然如果有更好的解决办法，也欢迎在评论区分享！🥳🥳🥳
