css3 角丸ボーダー、ボーダーshadow_html/css_WEB-ITnose

border-radius は、css3 で要素に丸い境界線を追加します。 IE9+chrome safari5+firefox4+に対応しました。入力 div などに境界線を設定できます。ボーダーと同様に、四隅をまとめて設定することも、個別に設定することもできます。

構文: border-radius: 1-4 length|% / 1-4 length|%;

-moz-border-radius:10px; 古いFirefoxをサポートします

-webkit-border-radius:10px;

各半径の値を左上、右上、右下、左下の順に設定します。左下を省略した場合は右上と同じになります。右下を省略した場合は左上と同じになります。 top-right を省略した場合は、top-left と同じになります。

例 1:

border-radius:2px;

以下と同等:

border-top-left-radius:2px;

border-top-right-radius:2px;

border-bottom-right - radius:2px;

border-bottom-left-radius:2px;

例 2:

border-radius:2em 1em 4em / 0.5em 3em;

同等:

border-top-left-radius: 2em 0.5;

border-top-right-radius:1em 3em;

border-bottom-right-radius:4em 0.5em;

border-bottom-left-radius:1em 3em;

box -shadowボックスに 1 つ以上の影を追加します。 box-shadow 属性は、IE9 以降、Firefox 4、Chrome、Opera、および Safari 5.1.1 でサポートされています。

構文: box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;

h-shadow、v-shadow が必要です。水平および垂直の影の位置。割り当ては許可されます。ぼかしオプション、ぼかし距離。オプションのスプレッド、影のサイズ。 color オプション、影の色。 inset はオプションで、外側のシャドウ (アウトセット) を内側のシャドウに変更します。

例: box-shadow: inset 3px 3px 6px #ccc;