忍者ブログ
Flex,Java,Html など、調べた事のメモ帳です。 間違ってたらゴメンなさい。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

box-shadowプロパティは、ボックスに1つまたは複数の影をつける際に使用します。 box-shadowプロパティでは、例えば以下のように影を指定します。

box-shadow: 10px 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

影は2~4つの長さの値で定義されますが、任意で色、insetキーワードを指定することもできます。 insetキーワードを付けると、影がボックスの外側ではなく内側につくようになります。 長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。 複数の影を指定する場合には、カンマ( , )区切りで影のリストを複数指定します。

影を定義する指定内容は、以下のように解釈されます。

  • 1番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
  • 2番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
  • 3番目の長さの値は、ぼかし距離です。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
  • 4番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
  • 色の値を指定すると、影がその色になります。
  • insetキーワードを指定すると、ボックスの外側の影から内側の影に変更されます。

尚、box-shadowプロパティは、::first-letter擬似要素に適用されますが、::first-line擬似要素には適用されません。 また、border-collapse:collapse;が指定されたtable内要素には、外側の影はつきません。



box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); を指定


この記事にコメントする
name
title
color
mail
URL
comment
pass   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret (チェックを入れると管理人だけに表示できます)
ブログランキング
にほんブログ村 IT技術ブログ IT技術メモへ
 
カレンダー
06 2017/07 08
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
人気ブログランキング
ブログランキング ブログランキング
最新CM
最新TB
ブログ内検索
PR
ATOM  
ATOM 
RSS  
RSS 
Copyright ©   プログラムメモ   All Rights Reserved
Design by MMIT  Powered by NINJA TOOLS
忍者ブログ [PR]