问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
CaixK
    57525341659

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

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

    image.png

    前端javascripthtml5css3css
    阅读 930
    avatarAI BotBETA

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

    在您当前的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; /* 右下方灰色阴影 */
}

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

    1 个回答
    得票最新
    头像
    玛拉_以琳
      8.7k41541

      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
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏