背景と枠線パート1
背景と枠線パート2
図形
視覚効果
タイポグラフィ
ユーザーエクスペリエンス
構造とレイアウト
トランジションとアニメーション
ソースコードダウンロード
box-shadow属性、形式:h-shadow v-shadow ブラースプレッドカラーインセット属性値はじめに
h-sahdow: 水平方向の影の位置、負の値が許可されます
v-shadow: 垂直方向の影の位置、負の値が許可されます
blur:ぼかし距離
spread: 影のサイズ、拡張距離、負の値も可能
color: 影の色
inset/outset: 内部または外部の影
拡張影の距離は 4 つの側面すべてに有効であり、1 つの側面だけに適用することはできません。
box-shadow は、複数の値セットを同時に有効にする設定をサポートしています
サンプルコード:
.wrap{ width: 200px; height: 120px; background: yellowgreen; box-shadow: 2px 0px 4px -2px black, -2px 0px 4px -2px black; }
border-radius を使用する投影で非常に使いやすい形状を生成するのは良いですが、疑似要素や半透明の装飾が追加されると、影のパフォーマンスが非常に悪くなり、次のような状況で問題が発生します。
半透明の画像、背景画像、またはborder-image
要素は、点線、点線、または半透明の境界線を設定しますが、背景がありません(または、background-clipがborder-boxではありません)
selement要素内の小さな角は、擬似要素を使用して生成されます。クリップパスソリューションで生成された形状:SVGのドロップシャドウを使用して、サンプルコードを達成します。-modeに基づく 実装、機能: 要素コンテンツと背景、および以下の要素の「混合」を実現する
基本的なbackground-blend-mode実装、機能: 混合を実現する背景色と背景画像、背景画像と画像
の3種類 状況のサンプルコード:.wrap{ width: 200px; height: 120px; border: 6px dotted yellowgreen; --box-shadow: 0px 0px 4px 0px black; -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1)) }
主な実装原理: コンテンツ疑似要素の背景は、下の背景と同じ画像を追加し、フィルターを追加します。ぼかしフィルター。ぼかしは、下にある背景や要素の背景には適用できません (これにより、要素自体がぼやけてテキストが見えなくなります)。また、疑似要素でのみ使用できることに注意してください。
。コードは次のとおりです:
.wrap1{ width: 200px; height: 120px; overflow: hidden; } .wrap1 > img{ max-height: 100%; max-width: 100%; -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg); } .wrap2{ width: 200px; height: 120px; background: hsl(335, 100%, 50%); overflow: hidden; } .wrap2 > img{ height: 100%; width: 100%; mix-blend-mode: luminosity; } .wrap3{ width: 200px; height: 120px; background-size: cover; background-color: hsl(335, 100%, 50%); background-image: url("../img/cat.png"); background-blend-mode: luminosity; }
bodyとwrapの両方の擬似要素は同じ背景画像を適用します
wrapのbackground-attachmentはfixedに設定されているため、背景画像はスクロールに追従しません アニメーションラップ擬似要素は絶対位置
に設定されており、Zインデックスレベルは背景よりも高いだけです
ブラーを使用してぼかしサイズを設定しますbody{ background: url("../img/cat.png") no-repeat; background-size: cover; }.wrap{ position: relative; width: 500px; margin: 0px auto; padding: 10px; line-height: 1.5; background: hsla(0, 0%, 100%, .3); overflow: hidden; }.wrap::before{ content: ''; background: url("../img/cat.png") 0/cover fixed; position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px); z-index: -1; margin: -30px; }ログイン後にコピー
注
100% 0/2em 2em は背景要素の位置と幅を配置します。特に 2em の幅と高さは標準です。背景要素の幅。
2 番目の線形グラデーションの 1.4em は、グラデーション軸に沿って測定されます。これは、グラデーション軸から要素の上端までの距離です。この場合、それは、グラデーション軸から要素までの距離です。右上端
から左下へは、グラデーションが左下隅から始まることを意味します
以上がCSS3 新機能の適用における視覚効果の詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。