Question

我的笔：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;
}

Answer 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]

Answer 2

您需要使用框阴影。我也在我的同一类型问题Link to that Answer的答案中描述了它，或者您可以通过此链接了解有关箱形阴影的更多信息Study box shadow 你可以添加

-webkit-box-shadow：10px 10px 5px＃595959;
-moz-box-shadow：10px 10px 5px＃595959;
-o-box-shadow：10px 10px 5px＃595959;

你的td风格＆amp;然后发现它和你想要的一样..

Answer 3

两者都在我这边可见。

实现3d效果的替代或补充：

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

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

Answer 4

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

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

Here I made an example与您的代码。

3d在html行的边界

4 个答案: