css ほんわり的box-shadow

Posted 2021-05-13

/* 
  box-shadow: 10px[左右] 10px[上下] 10px[ぼかし] rgba(0,0,0,0.25)[色,透明度];

  IE：
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
  [color影の色],[direction角度],[strength幅]
  
*/

.selector {
  /*ほんわり*/
  box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
  
  /*ほんわり　その２*/
  box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
  
  /*下だけ*/
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
  
  /*ほんわり（内側）*/
  box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
  border: 1px solid #D5D5D0;
}