下記のようにdiv#headerにbox-shadowを施していて、下の線だけ影を表示させるため
border-bottom: solid 1px #cccをしているのですが、左、上、右もborderが表示されてしまいます。
divを使用してbox-shadowで下線だけ影付きで表示(下線以外は線自体を表示しない)
するにはどのようにすればよいかアドバイスを頂ければ幸いです。
宜しくお願い申し上げます。
HTML
1 <div id="header-1412" class="clearfix"> 2 <div id="header"> 3 <h1><a href="http://home.php" title="toppage"><img src="./C_image/home/logo.gif" width="140" height="100" alt="Null" /></a></h1> 4 </div> 5 6 7 <div id="topbar"> 8 <ul id="topbarcontainer"> 9 <li>工事中</li><!-- 10 --><li>工事中</li><!-- 11 --><li>工事中</li><!-- 12 --><li id="topbarcontainer_right">工事中</li> 13 </ul> 14 </div> 15 16 17 18 </div>
CSS
1=========================================================== */ 2 3div#header { 4 width: 100%; 5 position: relative; 6 height: 125px; 7 /*z-index: 100;*/ 8 background-color: #fff; 9 border-bottom: solid 1px #ccc; 10 -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20); 11 box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20); 12 /*z-index: 99900;*/ 13 14} 15 16/* 17----------------------------------------------------------- */ 18 19div#headerlogo h1 { 20 position: absolute; 21 top: 10px; 22 left: 150px; 23 font-size: 11px; 24 line-height: 1; 25} 26/* 27----------------------------------------------------------- */ 28div#topbar { 29position: absolute; 30font-size: 20px; 31font-family:serif; 32font-weight: bold; 33width: 900px; 34left:350px; 35bottom:0px; 36} 37/*----------------------------------------------------------- */ 38 39ul#topbarcontainer li { 40display: inline-block; 41width:200px; 42height:50px; 43border-left: #ababab 1px solid; 44text-align: center; 45 46} 47/*----------------------------------------------------------- */ 48#topbarcontainer_right{ 49 border-right: #ababab 1px solid; 50} 51/*----------------------------------------------------------- */ 52div#topbar ul{ 53 margin: 0 0 0 1em; 54 padding: 0; 55 line-height: 50px; 56} 57
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/31 08:30
2017/03/31 08:40
2017/03/31 09:35