[解決済み】左側と右側だけにボックスシャドウを表示する方法
2022-04-03 01:21:27
質問
左側と右側(水平方向?)にだけボックスシャドウをつける方法があれば、ハックや画像なしで教えてください。私は使用しています。
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
でも、全体に影がつくんですよね。
要素の周りにボーダーがないのですが。
どうすればいいですか?
<ブロッククオート注意 を確認することをお勧めします。 ハミッシュの回答 この解決策には、不完全なマスキングは含まれていません。
複数のボックスシャドウを使用することで、より近い効果を得ることができます(左右に1つずつ)。
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
編集
ボックスシャドウを上下に2つ追加して、にじみ出る部分を隠します。
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
関連
-
[解決済み】位置固定が機能しない
-
[解決済み] HTMLのテーブルを部分的に透明にするには?
-
[解決済み] type="application/x-shockwave-flash "で表示可能な形式は?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] なぜブラウザはCSSセレクタを右から左へマッチングさせるのですか?
-
[解決済み] 要素の片側にボックスシャドウを追加するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] 背景画像を前後にパンするCSS【非公開
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] 入力のラジオ要素を水平に揃えるにはどうしたらいいですか?
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について
-
[解決済み] 電話番号のマークアップはどのように行うのですか?
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] フッターの内容が重なっているのを修正するには?