【问题标题】:How to add a text shadow to my table using CSS如何使用 CSS 向我的表格添加文本阴影
【发布时间】:2013-01-16 11:40:56
【问题描述】:

我有一个使用表格的设计like this

像标题图片一样,我想在黑色桌子内的文字周围添加漂亮的光晕。

我尝试在网上搜索有关 CSS 文本阴影的信息(例如 this article on CSS text-shadow)。

但是,当我将它们放入我的页面时,我似乎无法让它们在表格内工作,或者根本无法工作。

不知道我做错了什么。

【问题讨论】:

  • “不知道我做错了什么。” - 我也不。贴出你的代码,否则很难提供帮助。
  • 不确定要发布多少,但您可以在此处查看源代码:crossroad-design.com
  • 我已经取出了该页面上文本阴影的 CSS,因为它不起作用。但我是这方面的新手(我通常使用 WordPress、elgantthemes 等),所以我想也许我只是将文本阴影 css 代码放在错误的位置?我把它放在页眉区域,我有表格阴影的东西。
  • 我很确定该标题是错误的地方。你应该把它放在你的文本 div 中。如果您的文本没有 div,请创建一个类。

标签: html css text shadow


【解决方案1】:

您必须使用“text-shadow”(即 text-shadow: 2px 2px 5px #999;) 看一下参数定义here。 这是代码,你也可以在这里试试:http://jsfiddle.net/Salaros/EczY5/82/

<html>
  <head>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      text-align: center;
    }
    body {
      background-color: #000;
      background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAO0lEQVQYlWNgYGD4TyRGcIx1jeEYp0JkRTgUM8AF0RWhKUYVwMVmwGUtFutR3YjOJs8z6B7C4j7iFQIAm8p5b8pC31AAAAAASUVORK5CYII=
      ) repeat;
    }
    div#wrapper {
      margin: auto;
      width: 50%;
      min-height: 100%;
      background-color: #000;
      box-shadow: 15px 0px 10px -5px #888, -15px 0px 10px -5px #888;
    }
    div#wrapper p {
      font-size: 25px;
      color: #FFF;
      text-shadow: 2px 2px 5px #999;
    }
  </style>
  </head>  
  <body>
    <div id="wrapper">
      <br />
      <p>Here you go!</p>
      <a href="http://stackoverflow.com/questions/14357596/how-to-add-a-text-shadow-to-my-table-using-css">Go back to the question</a>
    </div>
  </body>
</html>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多