css 影効果を設定します: 1. メイン要素と二次要素の影効果を重ね合わせて、曲線状の影効果を作成します; 2. 2 つの二次要素を追加し、2 つの二次要素を左にねじって回転します小さな角度を付けると、平行四辺形が形成され、メイン要素の下に覆われて、エッジが歪むシャドウ効果が得られます。

CSSで影効果を設定する方法

# この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

カーブシャドウ:

カーブシャドウの実装原理は、シャドウの重ね合わせ効果によって生成されます。つまり、メイン要素に影を設定した後、メイン要素の下にセカンダリ要素を追加します。副要素を主要素と一致させ、副要素は円弧要素とします。このとき、主要素と副要素の影効果が重なり、曲線的な影が生成されます。

ステップ 1:

メイン要素に内側のシャドウを追加し、v 方向と h 方向のサイズを 0 に設定しますが、ぼかし半径を次のように設定します。大きいメイン要素内でシャドウ効果を実現するために大きくします。

2 番目のステップ:

現時点でサブ要素に対して変換する必要がある属性は次のとおりです: メイン要素レベルの下位レベルに追加され、z-index を通じて実装されます。メイン要素の後ろまたは前にあるサブ要素 ; 二次要素は円弧に変換する必要があります: border-radius:100px/10px; 絶対配置によって二次要素の位置を決定します; 二次要素に影を追加します。

HTML:

Shawdow Effect

ログイン後にコピー

CSS:

.effect{ position: relative; box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 50px #ddd inset; } .effect:after,.effect:before{ content: ''; background: #fff; position: absolute; z-index: -1; left: 10px; right: 10px; top:50%; bottom: 0px; border-radius: 100px/10px; box-shadow: 0 0 20px rgba(0,0,0,0.8); }

ログイン後にコピー

ワーピングシャドウ:

ワーピングエッジシャドウの原理はカーブシャドウの原理と似ていますが、エッジシャドウは歪みと回転という 2 つの属性を使用します。エッジワープシャドウも左右に 2 つのサブ要素を追加し、次に 2 つのサブ要素を左にひねり、わずかに小さい角度で回転させて平行四辺形を形成し、メイン要素の下にカバーします。

【推奨学習:

css ビデオチュートリアル】

css

.box{ width: 980px; height: auto; clear: both; overflow: hidden; margin: 20px auto; } .box li{ width: 300px; height: 210px; float: left; background: white; margin: 20px 10px; border: 2px solid #efefef; box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset; position: relative; } .box li img{ display: block; width: 290px; height: 200px; margin: 5px; } .box li:before{ content: ''; z-index: -1; position: absolute; width: 90%; height: 80%; left: 20px; bottom: 8px; background:transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.6); transform: skew(-12deg) rotate(-4deg); } .box li:after{ content: ''; z-index: -1; position: absolute; width: 90%; height: 80%; right: 20px; bottom: 8px; background:transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.6); transform: skew(12deg) rotate(4deg); }

ログイン後にコピー

以上がCSSで影効果を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。