オリジナル：
影に使用されるCSSのテキストの影と要素
はじめにテキストシャドウ＃
CSS使用text-shadowテキストの影のプロパティ、プロパティの合計4のような属性値：水平シェーディング、垂直ハッチング、（距離分解能やボケ）、色むら。text-shadow属性値は、テキストの影の練習で説明：最初の値は、シャドウ・セットの水平移動方向であり、第2の値がシャドウ垂直方向に設定され、第3の値が第4の値からセットシャドウ・ブラーは、シャドウ・セットの色であります。text-shadowプロパティの値が負の数であってもよいです。- テキストは、カンマで区切られた影を複数設けてもよいです。
コピー
text-shadow: 1px 2px 3px red ,1px 2px 6px rebeccapurple;
テキストシャドウ練習＃
コピー
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本阴影</title>
<style>
div{
font-size: 60px;
color: seagreen;
text-shadow: 1px 2px 3px red;
}
</style>
</head>
<body>
<div>微笑是最初的信仰，加油。</div>
</body>
</html>
影の要素紹介＃を
CSS使用のbox-shadow要素シェーディングの属性。box-shadow属性値を説明：最初の値が設定された第2の方向値に直交セット影水平方向であり、第3の値は、シャドウ・セットの定義は、第四の値がシャドウのセットサイズは、第五の値であります影の色を設定し、シャドウ値の第六の位置は、デフォルトの影の位置の外側に設定されているinset影の内部に配置されています。box-shadowプロパティの値が負の数であってもよいです。box-shadowシャドウプロパティ値の複数のカンマで区切って設定することができます。影の練習の要素＃
コピー
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素阴影</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid red;
box-shadow: 3px 6px 8px darkblue ,4px 8px 6px rebeccapurple inset;
}
</style>
</head>
<body>
<div>微笑是最初的信仰，加油。</div>
</body>
</html>
