Q
Version: 0.12.2

Demo: Background Clip

Padding Box
Border Box

In this example, there's a red border with alpha transparency. The padding box appears pink against the white background of the page. The border box appears purple because it blends with the blue background instead.

<div class='example'>
  <div id='padding-box'>
    Padding Box
  </div>
  <div id='border-box'>
    Border Box
  </div>
</div>
.example
  #padding-box
    Padding Box
  #border-box
    Border Box
@import "compass/css3.scss";

.example {
  padding: 2em;
  div {
    background-color: blue;
    border: 10px solid rgba(255, 0, 0, 0.5);
    color: white;
    @include text-shadow(darken(blue, 50%) 2px 2px);
    padding: 3px;
    text-align: center;
    margin-bottom: 2em;
  }
  #padding-box {
    @include background-clip(padding-box);
  }
  #border-box {
    @include background-clip(border-box);
  }
}
@import compass/css3.scss
.example
  padding: 2em
  div
    background-color: blue
    border: 10px solid rgba(255, 0, 0, 0.5)
    color: white
    +text-shadow(darken(#00f, 50%) 2px 2px)
    padding: 3px
    text-align: center
    margin-bottom: 2em
  #padding-box
    +background-clip(padding-box)
  #border-box
    +background-clip(border-box)
.example {
  padding: 2em;
}
.example div {
  background-color: blue;
  border: 10px solid rgba(255, 0, 0, 0.5);
  color: white;
  text-shadow: black 2px 2px;
  padding: 3px;
  text-align: center;
  margin-bottom: 2em;
}
.example #padding-box {
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.example #border-box {
  -webkit-background-clip: border;
  -moz-background-clip: border;
  background-clip: border-box;
}