[分享]css下划线加阴影

CSS下划线加阴影是一种常见的文字装饰效果，它为文字增加了一定的美感和可读性。下面我们来详细介绍实现方法。textdecoration: underline; textshadow: 0.1rem 0...

CSS下划线加阴影是一种常见的文字装饰效果，它为文字增加了一定的美感和可读性。下面我们来详细介绍实现方法。

text-decoration: underline;
text-shadow: 0.1rem 0.1rem 0.2rem #999; 

上述代码中，text-decoration属性用于设置下划线效果，underline表示添加下划线。后面的text-shadow属性用于设置文字阴影效果，其中0.1rem和0.2rem为阴影的偏移量和模糊半径，#999为阴影颜色。

需要注意的是，text-shadow属性可能会对页面性能产生一定影响，所以应该谨慎使用。如果只需要在特定元素上应用该效果，可以使用伪类选择器:hover或:focus，只有当鼠标悬停或元素被选中时才会显示下划线和阴影效果。

a:hover, a:focus {
  text-decoration: underline;
  text-shadow: 0.1rem 0.1rem 0.2rem #999;
} 

在上述代码中，我们为链接添加了一个a:hover伪类选择器，表示当鼠标悬停在链接上时，应用下划线和阴影效果。

最后需要说明的是，text-shadow属性的浏览器兼容性较好，基本支持所有主流浏览器。但是text-decoration属性可能存在一些差异，需要注意。