javascript - 请教一个css样式问题，文字白边并且有阴影?

Question

请教一个css样式问题，文字白边并且有阴影，底是白色，我用以下实现了，文字白边但是阴影不能生效了，有好的解决办法吗，谢谢大佬

.text-with-border {  color: black; /* 文字颜色 */  text-shadow:     -1px -1px 0 #fff, /* 左上方白色阴影 */     1px -1px 0 #fff, /* 右上方白色阴影 */    -1px  1px 0 #fff, /* 左下方白色阴影 */     1px  1px 0 #fff; /* 右下方白色阴影 */}

Answer 1

CSS 中有个专门用于文字描边的属性 -webkit-text-stroke，可以控制描边的宽度和颜色，比如

.text{  -webkit-text-stroke: 2px #333;}

然后再设置文字阴影

.text{    -webkit-text-stroke: 6px #333;      text-shadow: 0 4px 0 #333;}

其他方式以及详情

https://segmentfault.com/a/1190000040721783

Answer 2

根据您提供的代码和图片，您似乎想要实现一个文字样式，其中文字具有白色边框，并且具有阴影效果。您已经成功地设置了白色边框，但是阴影效果似乎没有生效。

在您当前的CSS样式中，您使用了四个text-shadow属性值来模拟阴影效果。然而，由于这四个阴影都是白色的，它们实际上相互抵消了，导致没有明显的阴影效果。

为了使阴影效果生效，您需要为阴影指定一个不同于白色（#fff）的颜色。例如，您可以尝试将阴影颜色设置为灰色（#888），如下所示：

.text-with-border {  color: black; /* 文字颜色 */  text-shadow:     -1px -1px 0 #888, /* 左上方灰色阴影 */     1px -1px 0 #888, /* 右上方灰色阴影 */    -1px  1px 0 #888, /* 左下方灰色阴影 */     1px  1px 0 #888; /* 右下方灰色阴影 */}

这将为文字添加灰色阴影，使其看起来更加立体和突出。您可以根据需要调整阴影的颜色和模糊半径来获得所需的外观。