1

我的笔：http ://codepen.io/helloworld/pen/gimoI

我想在表格行上有一个灰色和白色边框以实现 3d 效果。

为什么只有一种边框颜色可见？

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<table style="width:100%;">
  <tr>
    <td style="vertical-align:top;width:60px;">Alarm 1</td>
    <td style="width:auto;">
      <span style="font-weight:bold;">Brand LANG: </span>
      <span>Helmenstraße 5</span>
    <span>90000 Nürnbergxxxxxxxxx</span>
    </td>
    <td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
  </tr>
  <tr>
    <td style="width:60px;vertical-align:top;">
      <div style="border-radius:28px;border:black solid 1px;background:red;">Alarm 1</div>
    </td>
    <td style="width:auto;">
      <span style="font-weight:bold;">Brand LANG: </span>
      <span>Langenburgerwald allee 25/c</span>
      <span>70000 Wurmlingen ob der Tauber</span>
    </td>
    <td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
  </tr> 
</table>

body,html{ 
  padding:0;
  margin:10px;
  background:#fafafa;  
}

table{

  border-collapse:collapse;
  border-spacing:0;
}

table td
{
    padding: 5px;
}

td {
   border-bottom: gray solid 2px;
   border-top: white solid 2px;
  background:green;
}
4

4 回答 4

1

您需要使用 box shadows 。我只是在我的同类型问题的答案之一中也描述了它链接到该答案，或者您可以通过此链接了解有关 box-shadows 的更多信息您可以添加学习框阴影

-webkit-box-shadow:10px 10px 5px #595959;
-moz-box-shadow:10px 10px 5px #595959;
-o-box-shadow:10px 10px 5px #595959;

以你的 td 风格，然后发现它和你想要的一样..

于 2013-09-10T09:44:46.047 回答
1

因为顶部边框是白色的，很难看出与背景的区别。

我刚刚更新了它：

body,html{ 
  padding:0;
  margin:10px;
  background:#fcc;
}

table{

  border-spacing:0px;
}

table td
{
   padding: 5px;
   border-bottom: gray solid 2px;
   border-top: white solid 2px;
}

tr {

   background:green;

}

你必须删除border-collapse:collapse;

检查这个 [http://codepen.io/anon/pen/vIHcf][1]

于 2013-09-10T09:23:42.373 回答
0

两者都在我身边可见。

实现 3d 效果几乎没有替代或补充：

您可以使用 CSS 大纲。它就像第二个边界。

http://www.w3schools.com/css/css_outline.asp

于 2013-09-10T09:21:30.820 回答
0

我看到空白和灰色的边框。但是如果你想在行上添加一些 3d 效果，为什么不使用 box-shadow 呢？

box-shadow: inset 1px 1px 3px #000;

在这里，我用你的代码做了一个例子。

于 2013-09-10T09:30:22.840 回答