box-Shadowをつけた時にしたの枠線以外を表示しない

Question

下記のようにdiv#headerにbox-shadowを施していて、下の線だけ影を表示させるため
border-bottom: solid 1px #cccをしているのですが、左、上、右もborderが表示されてしまいます。

divを使用してbox-shadowで下線だけ影付きで表示（下線以外は線自体を表示しない）
するにはどのようにすればよいかアドバイスを頂ければ幸いです。
宜しくお願い申し上げます。

  <div id="header-1412" class="clearfix">
    <div id="header">
      <h1><a href="http://home.php" title="toppage"><img src="./C_image/home/logo.gif" width="140" height="100" alt="Null" /></a></h1>
  </div>


    <div id="topbar">
    <ul id="topbarcontainer">
    <li>工事中</li><!--
    --><li>工事中</li><!--
    --><li>工事中</li><!--
    --><li id="topbarcontainer_right">工事中</li>
    </ul>
    </div>



  </div>

=========================================================== */

div#header {
	width: 100%;
	position: relative;
	height: 125px;
	/*z-index: 100;*/
  background-color: #fff;
	border-bottom: solid 1px #ccc;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
	/*z-index: 99900;*/

}

/* 
----------------------------------------------------------- */

div#headerlogo h1 {
	position: absolute;
	top: 10px;
	left: 150px;
	font-size: 11px;
	line-height: 1;
}
/* 
----------------------------------------------------------- */
div#topbar {
position: absolute;
font-size: 20px;
font-family:serif;
font-weight: bold;
width: 900px;
left:350px;
bottom:0px;
}
/*----------------------------------------------------------- */

ul#topbarcontainer li {
display: inline-block;
width:200px;
height:50px;
border-left: #ababab 1px solid;
text-align: center;

}
/*----------------------------------------------------------- */
#topbarcontainer_right{
  border-right: #ababab 1px solid;
}
/*----------------------------------------------------------- */
div#topbar ul{
  margin: 0 0 0 1em;
  padding: 0;
  line-height: 50px;
}

Answer 1

まず、box-Shadowを表示するためにborder-bottomを使う必要はありません。双方関係のないプロパティです。box-Shadowはあくまで要素ボックスに付くものなので、「上だけ」とかは指定できません。

なので pegyさんの考えておられるものが実現できるかはわかりませんが、下記のようにすれば一応下だけに影がある、ということは実現出来ます。

div#header {
    width: 100%;
    position: relative;
    height: 125px;
  background-color: #fff;
  /*
    border-bottom: solid 1px #ccc;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
	*/
    -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2);

}
```**動くサンプル：**[https://jsfiddle.net/aw54t8wd/](https://jsfiddle.net/aw54t8wd/)

Comments

[pegy]

kei344様
いつもご回答有難うございます。とても助かりました。サンプルまでありがとうございます（涙）
重ねてで恐縮ですが、このように表示した場合、下線の両端のブラウザの淵との間に隙間ができてしまうのですがChromeのtoolでみるとmarginが8pxずつられてしまっています。これをmargin: 0px 0px 0px 0px;で強制的に消しても間が空いてしまうのですが、もし原因が分かればアドバイスを頂けますでしょうか。イメージとしてはこの下線がブラウザと接しているはずなのですが。。。

[kei344]

どこの部分でしょうか？サンプルのことを言っているのであれば、
body { margin: 0; }
でもためしてみてください。

[pegy]

コメント頂き有難うございます。
確認をさせて頂きます。