問題タブ [box-shadow]

div の下部と上部に持ち上げられたコーナー、3D ボックス効果を作成しようとしています。div の下部に目的の効果を作成できますが、上部の効果を模倣する方法がわかりません。divの下部と上部の両方でこれを達成する方法を知っている人はいますか?

ここに JSFiddle があります: https://jsfiddle.net/rnejan81/

css で以下のようなボックス シャドウ効果を取得するにはどうすればよいですか。私のdivは以下のようなものですが、影はありません。

いくつかのコンテンツを含む 2 つの div があります。1つの「箱」と1つの「円」を、1つの図形のように見せたい. 中央下部に丸で囲った部分がある箱のようなもの。言葉で説明するのは難しいですが、コードを表示する方がはるかに優れていると思います。

マークアップ:

CSS:

次に、円の境界線 (影) の上部を切り取りたいと思います。誰でもこれを行う方法を知っていますか? おそらく、これを行う別の（より良い）方法もありますか？

どうもありがとう

Web の側面とコンテナ div の側面でボックス シャドウ プロパティを使用していますが、Chrome でスクロールを実行するとひどい遅延が発生します。

私は 2011 年から問題を調査して報告してきましたが、成功しませんでした。Chrome はまだ問題を解決していません。

CSS3ボックスシャドウプロパティでスクロールラグ?

現在、この問題を解決する解決策があるかどうか疑問に思っています。

Explorer 10、11、および Edge では、Web が完成します。Mozilla と Opera でも。スクロール時の fps の低下は、Chrome でのみ発生します。

ここで可能な解決策を示しますが、あまりスマートではないようです。

CSS3ボックスシャドウプロパティでスクロールラグ?

解決策は、透明な png 境界線を div に追加することです。

今日、他の解決策はありますか？ありがとうございました

Bootstrap フレームワークは、短い構文を使用して for を定義しbox-shadowますdiv.form-control:focus。

カンマ セットの前の部分は何ですか? カンマの後の部分は影の見え方を定義しますが、前の部分は? これに関する詳細情報はどこにありますか?

Googleでこれを検索すると、w3schoolsのページが見つかりましたが、コンマの後の部分だけを説明しているようで、前の部分はわかりません。

このコードは Codepen で見ました。これは、より大きなプロジェクトの一部です。私の質問は、なぜ box-shadow の "inset" プロパティのセットが 2 つあるのですか? 両方とも同じ機能を持っていますか？それらの1つを削除できますか？事前に助けてくれてありがとう!!

元のプロジェクトへのリンク: http://codepen.io/tholman/pen/BLeJs