テーブルの上と左に白い線を付けたい

質問

下記に書いたのHTMLについて質問があります。
説明が下手かもしれませんが、宜しくお願いします。
このHTMLを書いたら外側が黒枠のテーブルっぽいのがが出るんです、
見出し部分の「ここにタイトル」という緑部分の、上と左部分が白色になってる部分があるんですが、これって新規で作る場合はどんな手順で作ればいいのでしょうか？

当方使用しているソフトはDreamweaver8です。

<table><tbody><tr><td>
<div style="background:#000;font-size:13px;color:#000;padding:1px"><div style="border-width:1px;border-style:solid;border-color:#fff #80dd99 #80dd99 #fff;background:#90eeaa;text-align:center;padding:3px">
＊　ここにタイトル　＊
</div><div style="margin-top:1px;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;background:#fff;padding:8px">
ここに本文
</div></div>
</td></tr></tbody></table>

回答No.1

chie65536 · ベストアンサー

タイトルが「３Ｄ表示」になってるだけです。

<div style="border-width:1px;border-style:solid;border-color:#fff #80dd99 #80dd99 #fff;background:#90eeaa;text-align:center;padding:3px">
を
<div style="border-width:3px;border-style:solid;border-color:#a0ffbb #80dd99 #80dd99 #a0ffbb;background:#90eeaa;text-align:center;padding:3px">
に変えてみて下さい。（メモ帖で開いてコピー＆ペーストするなどで）

上と左の白い部分が消え、代わりに、上と左が少し薄く、それと、下と右が少し濃くなったのが判りますか？そして「立体っぽい」表示になりましたか？

実は、下と右も元から濃かったんですが、黒線で邪魔されて濃くなってるのに気付かなかったんですね。

３Ｄ表示は「上と左を光が当たってるように明るい色に、下と右を影になってるように暗い色にする」と言う方法で行ないます。

で、元の「白い部分」は「３Ｄ表示する際の明るい部分」で、ベースと同じ色で明るい色にすべきなのを白色にしてしまった為、白い部分だけ目立ってしまい３Ｄ表示に見えなかったのです。

当方、Dreamweaverは良く知りませんが、セルの修飾に「立体表示」とか「立体にする」とか「３Ｄ表示」とか、そんな感じのがある筈なんで、調べてみて下さい。

回答No.2

zosterops

border-style:solid;border-color:
#fff #80dd99 #80dd99 #fff;
この順に[上][右][下][左]の枠の線の色を指定しているはずですので、
上と左ならば、#fff（正しくは白は#ffffff） の部分を好きな色に指定すればいいのでは？