株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

【CSS】左右片側にドロップシャドウを表示する方法

2015.6.25(Thu) 23:00 | CSS | oshima

こんにちは。
ドロップシャドウをたまに使うのですが、どうしても忘れてしまうので
書いておきます。

環境

iOS
Android
chrome
FireFox
IE9+

CSS

/*左側*/
#hoge_left{
  -webkit-box-shadow: -8px 0px 8px -1px rgba(0,0,0,0.31);
 -moz-box-shadow: -8px 0px 8px -1px rgba(0,0,0,0.31);
 box-shadow: -8px 0px 8px -1px rgba(0,0,0,0.31);
}
 
/*右側*/
#hoge_right{
  -webkit-box-shadow: 8px 0px 8px -1px rgba(0,0,0,0.31);
 -moz-box-shadow: 8px 0px 8px -1px rgba(0,0,0,0.31);
 box-shadow: 8px 0px 8px -1px rgba(0,0,0,0.31);
}