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.

html haml

<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

scss sass css

@import "https://compass-style.org/files/beta-sub/examples/compass/css3/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 https://compass-style.org/files/beta-sub/examples/compass/css3/compass/css3.scss
.example
  padding: 2em
  div
    background-color: blue
    border: 10px solid rgba(255, 0, 0, 0.5)
    color: white
    +text-shadow(darken(blue, 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 {
  -moz-background-clip: padding;
  -o-background-clip: padding-box;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}
.example #border-box {
  -moz-background-clip: border;
  -o-background-clip: border-box;
  -webkit-background-clip: border;
  background-clip: border-box;
}