<div class='box-shadow-example' id='box-shadow-default'></div>
<div class='box-shadow-example' id='box-shadow-custom'></div>

#box-shadow-default.box-shadow-example
#box-shadow-custom.box-shadow-example

@import "https://compass-style.org/files/docs/examples/compass/css3/compass/css3";
.box-shadow-example {
  width: 40px;
  height: 40px;
  background: #eeeeee;
  margin: 20px; }
// Default box shadow
#box-shadow-default {
  @include box-shadow; }
// Box shadow with custom settings
#box-shadow-custom {
  @include box-shadow(red, 2px, 2px, 10px); }

@import https://compass-style.org/files/docs/examples/compass/css3/compass/css3
.box-shadow-example
  width: 40px
  height: 40px
  background: #EEE
  margin: 20px
// Default box shadow
#box-shadow-default
  +box-shadow
// Box shadow with custom settings
#box-shadow-custom
  +box-shadow(red, 2px, 2px, 10px)

@charset "UTF-8";
.box-shadow-example {
  width: 40px;
  height: 40px;
  background: #eeeeee;
  margin: 20px;
}
#box-shadow-default {
  -moz-box-shadow: #333333 1px 1px 5px 0;
  -webkit-box-shadow: #333333 1px 1px 5px 0;
  -o-box-shadow: #333333 1px 1px 5px 0;
  box-shadow: #333333 1px 1px 5px 0;
}
#box-shadow-custom {
  -moz-box-shadow: red 2px 2px 10px 0;
  -webkit-box-shadow: red 2px 2px 10px 0;
  -o-box-shadow: red 2px 2px 10px 0;
  box-shadow: red 2px 2px 10px 0;
}