ホームページ > 記事 > 毎日のプログラミング > CSS3でボーダーの影効果を作るにはどうすればいいですか？ (写真 + ビデオ)
CSS3でボーダーの影効果を作るにはどうすればいいですか？ (写真 + ビデオ)
- 藏色散人オリジナル
- 2018-09-27 15:20:157096ブラウズ
この記事では、css3枠影効果の詳細な実装方法を中心に紹介します。
Web デザインでは、通常、写真や境界線の影、立体感などの効果を実現するために PS ツールを使用します。しかし、いくつかの基本的なエフェクトを P ピクチャで完了する必要がある場合、それは比較的非効率的になります。
css3 の境界影属性 の box-shadow を紹介します。この属性を使用すると、境界影効果を簡単に実現できます。
css3 ボーダー シャドウ コードの例は次のとおりです:
1. box-shadow 属性はボーダーの外側にシャドウを実装します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3边框阴影</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
div{margin: 20px 0px;
width: 100%;
height: 40px;
background: #fff;
box-shadow:5px 5px 10px 5px #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>この HTML コードでは、div に box-shadow スタイル属性を追加し、パラメータを 5px 5px 10px 5px #ccc に設定します。
最初のパラメータは水平方向の影の位置を表します。
2 番目のパラメータは垂直方向の影の位置を表します。
3 番目のパラメータはぼかし距離を表します。
4 番目のパラメータは影のサイズを表します。
5 番目のパラメータは影の色を表します。
6 番目のパラメータは設定されておらず、デフォルトで外側の影になります。 。
上記のコードの最終的な効果は次のようになります。
図に示すように、オブジェクトの外側の影を正常に設定できました。この div の境界線。
注: box-shadow プロパティは、ボックスに 1 つ以上の影を追加します。
box-shadow 属性のパラメータはそれぞれ、水平方向の影の位置、垂直方向の影の位置、ぼかし距離、影のサイズ、影の色、内側と外側の影 (デフォルトは外側)、および設定された内側の影 (挿入) を表します。 ）。
2. box-shadow 属性はボーダー内にシャドウを実装します。
上記の HTML コードに基づいて、box-shadow の値にいくつかの変更を加えます。 style 属性:
box-shadow:5px 5px 10px 5px #ccc inset;
効果は次のとおりです:
図に示すように、境界線の内側のシャドウ効果を div に設定します。
3. 円筒効果を実現する Box-shadow 属性
box-shadow:0px 5px 10px 10px #ccc inset;
ここでは、水平方向の影の位置を 0 ピクセルに設定し、内側の影を設定します。
最終的な効果は次のとおりです。
図に示すように、div は円筒効果を示します。
注: box-shadow 属性では、最初の 2 つのパラメータは負の値にすることができ、存在する必要がありますが、次のパラメータはオプションです。
この記事は css3 の境界線の影効果 の具体的な実装方法についての記事ですので、困っている方の参考になれば幸いです。
以上がCSS3でボーダーの影効果を作るにはどうすればいいですか？ (写真 + ビデオ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。