1

私のペン: http://codepen.io/helloworld/pen/gimoI

3D 効果を実現するために、テーブルの行にグレーと白の境界線を設定したいと考えています。

境界線の色が 1 つしか表示されないのはなぜですか?

<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

上枠が白く、背景との違いが分かりにくいためです。

私は今それを更新しました：

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 に答える
1

ボックスの影を操作する必要があります。同じタイプの質問の回答の1つでも説明しましたその回答へのリンク、またはこのリンクにアクセスして、ボックスシャドウの詳細を確認してください追加できるボックスシャドウを研究してください

-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 に答える
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 に答える