背景のエフェクトを付加する
このサンプルの動作確認済み環境。
| マシン | 環境 |
|---|---|
| iPhone | iPhone OS 3.1.2に付属のSafari |
| Mac | Safari 4.0.4 |
角丸
.sample1 { -webkit-border-radius: 10px; }
設定する値は「角丸の半径のサイズ」になります。
角丸+影
.sample2 { -webkit-border-radius: 10px; -webkit-box-shadow: 3px 3px 6px rgba(255, 0, 0, 0.5); }
影の記述が追加されています。
-webkit-box-shadow に設定する値は先頭から順番に以下の内容。
- 水平方向のオフセット
- 垂直方向のオフセット
- ブラーのサイズ(半径)
- 色
反射
.sample3 { -webkit-border-radius: 10px; -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); }
-webkit-box-reflect で反射を設定。 -webkit-gradient で反射画像にグラデーションを設定しています。
-webkit-box-reflect に設定する値は先頭から順番に以下の内容。
- 反射させる位置
- 反射画像との距離
- 反射画像のマスク(省略可能)
-webkit-gradient に設定する値は先頭から順番に以下の内容。
- グラデーションの種類
- 開始位置
- 終了位置
- (複数設定可能)グラデーション設定
サンプルはこちらで確認できます。
