ドロップシャドウの指定

通常テキスト

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<p class="textshadowXX">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

p[class^='textshadow'] {font-size: 3rem;}

ドロップシャドウ付きテキスト

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.textshadow01 {
	text-shadow: 1px 2px 15px rgba(0, 0, 0, .6);
				/* 水平方向の距離 - 垂直方向の距離 - 影のぼかし半径(省略可） - 影の色(省略可） */
				/*水平方向の影 …正の値を指定すると右へ、負の値を指定すると左へ*/
				/*垂直方向の影 …正の値を指定すると下へ、負の値を指定すると上へ*/
				/*ぼかし半径 …指定されない場合はゼロ*/
				/* 色…指定されない場合はブラウザが選択した色*/
	}

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.textshadow02 {
	text-shadow:
		0 -1px #fff,			/*下から上へ影が重なる*/
		1px 0px #fff,
		0px 1px #fff,
		-1px 0px #fff,
		2px 2px 3px #666;
		}

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.textshadow03 {
	text-shadow:3px 3px #999;
	}

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.textshadow04 {
	color: #99cccc;
	text-shadow:
		1px 2px #d3dae9,
		-1px -2px #12bbbb;
	}

<div class="boxshadowxx"><h3>これはただの箱</3></div>

div[class^='boxshadow'] {
	background: #afeeee;
	padding: 2rem;
	width: 40%;
	}

.boxshadow01 {
	-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	-o-box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	-ms-box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
		/* 水平方向の距離 - 垂直方向の距離 - 影のぼかし半径(省略可） - 影の色(省略可） */
	}

.boxshadow02 {
	-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
	-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
	-o-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
	-ms-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
	}