古いIEが次々と息絶えていった2016年、WEBサイトのコーディングで非常に出番の多い定番効果の「角丸・ドロップシャドウ・グラデーション・背景の透明化」、この辺りがCSS3を使ってキレイにマークアップできるようになってきました。

4つの角丸をいちいち画像にして複雑なスタイルシートを記述・・・立体感を出すためにドロップシャドウをつけたくて影だけの画像素材を作ってスタイルシートでリピート・・・そんな不毛な時代はようやく終わったのです！

あと、透明な背景とかもIEでは苦しみましたね。
半調な透明度のあるベタの背景も、IEが透明度のopacityにきっちり対応していなかった時代は大変でした。
「ただの単色で、ほんのちょっと透けてるだけでいいのに！」・・・これが通用しない。
半透明なpng画像を作り、背景画像に指定。おまけにフェードアニメを作ろうとしたらIEで画像の半調な部分が漆黒にチカチカしたりして。自分はなぜ残業してるのか？、自分はいったい誰なのか？・・・よく自問自答したものです。

opacityはもうベンダープレフィックスも必要なくなってるし、いったい僕らはいったい何に苦しめられていたんだろう？っていう時代はすでに到来しているのです。素晴らしい。

あ、あとちょっと外れますが何かと便利な「透明色」キーワードの「transparent」も、綴りを（自分が）よく忘れるので一緒に載せときます。

前提

厳密な対応バージョンは小難しいので明記できませんが、ベンダープレフィックスを全てつけておけば多少古いバージョンのブラウザでも大丈夫です。
詳しく調べたい人はMozilla Developer Networkとかでプロパティを調べてみるなどしてくださいね。

  • IE10〜
  • Chrome 最新バージョン
  • Safari 最新バージョン
  • Firefox 最新バージョン
  • Opera 最新バージョン

ざっくり言うとこの辺りに対応しています。
めっちゃ最新のブラウザになると、ベンダープレフィックスが必要ないということもあります。が、まぁもうしばらくはつけといた方が無難かな？

よく使う効果・ベンダープレフィックス付きテンプレート

/*
 * 要素を透明、半調にする
 * opacity: 0;（完全に透明）
 * opacity: 0.5;（半調）
 * opacity: 1;（完全に不透明）
 */
.opacity {
  opacity: 0.6;
}

/*
 * 背景色やボーダーのカラーを透明色に指定する
 * rgba(R, G, B, 透明度);
 * 透明度は0に近いほど透明で1に近いほど不透明
 */
.trans1 { /* 背景色を透明に指定 */
  background: transparent;
  background: rgba(0,0,0,0); /* transparentと同値 */
}

.trans2 { /* 背景色を半調のカラーに指定 */
  background: rgba(255, 255, 255, 0.5);
}

.transBorder { /* ボーダーを透明に指定 */
  border: solid 10px transparent;
}

/*
 * 角丸にする
 * border-radius: （水平方向）左上 右上 右下 左下 / （垂直方向）左上 右上 右下 左下;
 * 値は省略可能。省略した値は以下のようになる
 * border-radius: （水平・垂直方向）左上 右上 右下 左下;
 * border-radius: （水平・垂直方向）左上 (右上左下) 右下;
 * border-radius: （水平・垂直方向）(左上右下) (右上左下);
 * border-radius: （水平・垂直方向）(左上右下右上左下);
 */
.rdus {
  background: #fff;
  border: solid 3px #000;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
}

/* 
 * 右下方向外側にドロップシャドウをつける
 * box-shadow: 水平位置 垂直位置 ぼかし径 広がり径 rgba(R, G, B, 透明度);
 */
.shadowBox {
  background: #fff;
  -webkit-box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.6);
  -ms-box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.6);
  -o-box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.6);
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.6);
}

/*
 * 上下内側にドロップシャドウをつける（ボックス要素）
 * box-shadow: 水平位置 垂直位置 ぼかし径 広がり径 rgba(R, G, B, 透明度) inset;
 * 「inset」をつけると内側シャドウになる
 */
.inShadowBox {
  /* このクラスのボックス要素の上下内側に影がつく。inShadowBox:BEFORE、.inShadowBox:AFTERとセットで記述。 */
}

.inShadowBox:BEFORE {
  content:"";
  display: block;
  padding-top: 40px;
  -webkit-box-shadow: 0 8px -5px 8px rgba(0, 0, 0, 0.35) inset;
  -moz-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
  -ms-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
  -o-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
  box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
}

.inShadowBox:AFTER {
  content:"";
  display: block;
  padding-bottom: 40px;
  -webkit-box-shadow: 0 -8px -5px 8px rgba(0, 0, 0, 0.35) inset;
  -moz-box-shadow: 0 -8px 8px -5px rgba(0, 0, 0, 0.35) inset;
  -ms-box-shadow: 0 -8px 8px -5px rgba(0, 0, 0, 0.35) inset;
  -o-box-shadow: 0 -8px 8px -5px rgba(0, 0, 0, 0.35) inset;
  box-shadow: 0 -8px 8px -5px rgba(0, 0, 0, 0.35) inset;
}

/*
 * 背景色を上から下垂直方向のグラデーションにする
 * linear-gradient(to bottom, 開始色, 終了色);
 * background: linear-gradient(to bottom, #0c4f9b, #106dd5);
 */
.grad {
  background: #fff;
  background: -webkit-linear-gradient(top, #fff, #000);
  background: -moz-linear-gradient(top, #fff, #000);
  background: -ms-linear-gradient(top, #fff, #000);
  background: -o-linear-gradient(top, #fff, #000);
  background: linear-gradient(to bottom, #fff, #000);
}