在编写toast组件时，组件上的文字会变得模糊。发现toast使用了transform:translate(-50%,-50%);↑原貌↑使用translate后的样子在复现过程中发现FireFox没有模糊的问题，但是Chrome和新版Edge会有，有滚动条的时候会模糊↑是否是水平滚动条还是垂直滚动条都会有影响网上大部分的解释是：使用transform的元素的宽度或者高度是奇数引起的（目前还没有找到根本原因，知道的请评论)，这里有几种解决方案。当元素的宽度和高度确定后，使用负边距而不是平移。不确定在使用元素的宽高时使用js计算元素的负边距代替translate使用flex代替translate使用下面的代码避免使用translate
