Q&A
画像の左右のみに影を付けたいのですが、画像の上部にも影が表示されます。なぜでしょうか？調べて以下のように記述すると影を付けれるようですが。以下
/* 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 ; */
box-shadow: 0px 0px 10px 5px rgba(3,0,0,0.3);
しかし、上下の向きpxの部分の0pxを消去すると、左右の影まで全て消去されてしまいます。
これを左右のみ影を表示させたいです。
付属画像参考
html
1<!DOCTYPE html> 2 3<html lang="ja"> 4 5<head> 6 <meta content="text/html; charset=utf-8" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <style> 9/* 画像の大きさ調節 */ 10img.example001 { 11 width: 80%; 12 height: 450px; 13 text-align: center; 14 vertical-align: bottom; 15 background-color: white; 16 /* 画像に影を付ける */ 17/* 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 ; */ 18box-shadow: 0px 0px 10px 5px rgba(3,0,0,0.3); 19 } 20</style> 21 22</head> 23<body> 24 25<div class="center12"> 26 <p><img src="tth.png" alt="［写真］" class="example001"> </p> 27</div> 28 29</body> 30</html>
回答1件
0
ベストアンサー
影をふたつつければ対応できるかと思います。
css
1box-shadow: 10px 0px 10px -10px rgba(3, 0, 0, 1), -10px 0px 10px -10px rgba(3, 0, 0, 1);
ただ、上下にはみ出ないようにするとコーナーの処理がどうしても不自然になりそうです。
全体レイアウト上の制約が許すならば、親要素でoverflow:hiddenとした方がいいかもしれません。
css
1 img.example001 { 2 width: 80%; 3 height: 450px; 4 text-align: center; 5 vertical-align: bottom; 6 background-color: white; 7 /* 画像に影を付ける */ 8 /* 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 ; */ 9 box-shadow: 0px 0px 10px 5px rgba(3, 0, 0, 0.3); 10 display: block; 11 margin: 0 auto; 12 } 13 14 p { 15 overflow: hidden; 16 }
投稿2022/03/30 02:27
総合スコア37450
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/03/30 09:25