CSSで固定されたフレーム枠（額縁のようなフレーム）を作る方法です。マスクやクリッピングなど、いろんな方法を試しましたが結局再現できず。一旦落ち着いた方法を書き残しておきます。
CSSで四角い型抜きオブジェクトを作る
作りたかったのは、こんな感じのフレーム枠です。（イラレで作ったサンプル）
写真を飾るような額縁フレームのデザインです。これを画面の前面に固定し、後ろの要素をスクロールしたときに奥行きが出るような表現をしたかったんですね。
例えばIllustratorで作るなら「マスク」や「クリッピング」「パス抜き（前面オブジェクトで型抜き）」という方法がありますが、Web上で作るとなるとCSSで処理しないといけないので、それができるコードが必要です。
例えばマスクなら「mask」プロパティ、クリッピングなら「clip／clip-path」プロパティが使えるんですが、内側を表示するサンプルはたくさん出てくるけど、外側を生かす方法が見当たらない。
つまり、内側を切り抜いて外側を残すような型抜き方法がいくら探しても見つからなかったんですね。多分需要が少ないんだと思いますが、、、
じゃあ反転すればいいのでは？と思って調べても、都合よく反転できるプロパティがなさそう。
となれば、あとは枠線を極太にして内側表示にするという方法しか残っていませんでした。
borderでフレームオブジェクトを作る
オブジェクトで型抜きを作れないなら、中抜きの枠線を太くしてオブジェクトに見立てるしか方法はなさそうです。
ありえない数値ですが、borderを120pxまで拡大し、さらに「display:fixed」で画面に固定します。これでフレームが完成します。
borderは内側につけないと画面の外にはみ出ちゃうので「box-sizing: border-box」でボックス内に収めます。
あとは、レイヤーの奥行きを出すために「box-shadow」か「filter:drop-shadow」で陰影をつけます。
この陰影だけを乗算する方法が、、、見つかりませんでした。「mix-blend-mode」ではフレーム全域が乗算されるので、後ろ側が透けてしまいます。
実験的に作ったコードをCODEPENで実装してみたので、よければどうぞ。
See the Pen eYZvNKe by officehojo (@officehojo) on CodePen.
CSSエフェクトやコードが使える！CODEPENやCSSDeckが便利
今回、初めてCODEPENを使ってみましたが、とても便利に使えたのでおすすめします。アカウント登録をすると、オンラインのブラウザ上でコード実装を実験することができる超便利なツールです。打ち込んだコードは横のプレビュー画面でライブ更新されていくので、煩わしい動作もなくいろんな方法が試せます。開発の方々に愛されているプラットフォームなんですね。
使える言語はHTML、CSS／SASS、JSなど、ほぼ網羅しています。私は皆さんのように態逸れたものを作ることはできませんが、実験したコードを保存し、自分のサイトに埋め込んだり、保管して共有したり、一般公開もできるのでとても素敵です。
さらに、CODEPEN上にはコーダー&プログラマーたちが開発したオープンソースコードもたくさん見ることができるので、欲しいエフェクトなんかが見つかればコピーして使うこともできます。（一応激ゆるのライセンスもあるみたい）
CODEPENと同じく、CSSに特化したアニメーションやエフェクトなどを投稿したり共有したりできるCSSDeckもおすすめ！たくさんのオープンソースコードが開示されています。
Bracketsのライブプレビューが便利に使えない今、CODEPENは救世主になっています。