ベンダーフレックス(vendor prefix)
ブラウザによって、
CSSが動作しないことが有るそうです。
なので、ベンダー識別子(vendor identifier)を使って、動作をさせることが必要な場合もあるようです。

LiveDoorブログのカスタマイズで、
ヘッダー部分に透明色が利用されています。
15051602

こちらの見本の、一番上部(トップ部)が、背景がオレンジ色でブルーのグラデーションがかぶさっています。
このブルーグラデーションを指定しているCSSに、
ベンダーフレックス(vendor prefix)を利用しています。

#blog-header {
border-radius: 4px 4px 0 0;
height: 160px;
background-color: #D89345;
background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:    -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:     -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:         radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
position: relative;
}

上の、
  • -webkit-
  • -moz-
  • -ms-
がベンダー識別子です。


    -webkit-   Google Chrome、Safari、 Opera
    -moz-      Firefox
    -ms-       Internet Explorer
 ということらしいのですが、 特別に opera は特別に -o- という識別子も用意されているようです。

ちなみに上記のスタイルを表示してみることにします。

#blog-header {
border-radius: 4px 4px 0 0;
height: 160px;
background-color: #D89345;
background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:    -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:     -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:         radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
position: relative;     }

色を変えてみます。
#blog-header {
border-radius: 4px 4px 0 0;
background-color: #FFF;
background-image: -webkit-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image:    -moz-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image:     -ms-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image:         radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);

position: relative;     }

あらためて、色や透明色の関係を試していきたいと思います。