角丸の影が四角い、影も角丸に沿わせたい

実現したいこと

ここに実現したいことを箇条書きで書いてください。
slick読み込み後も、角丸の影が四角い、影も角丸に沿わせたい

前提

四角い枠の要素に「角丸」「影」の効果をつけました。
うまくいっていたのですが、slickでスライダー実装をしたところ、「角丸」はそのまま残りましたが「影」が四角く（？）なってしまいました。

<li class="p-voice__item"> <h3 class="p-voice__item-title">タイトル</h3> <p class="p-voice__item-text">テキストテキスト</p> </li> CSS .p-voice__item{ border-radius: 30px; background-color: #fff; padding: 6.26666vw 8.333333vw; filter: drop-shadow(0 6px 6px rgba(99,99,99,0.5)); }

試したこと

overflowがついている可能性も確認しましたが、親要素にそのようなものは見当たりませんでした。どうすれば良いのでしょうか。。

Lhankor_Mhy

2023/06/24 01:21

ご提示のコードを試してみましたが、問題が再現しませんでした。ご提示いただいていない部分のコードに原因がありそうです。

行動規範の内容に同意します

回答2件

overflowがついている可能性も確認しましたが、親要素にそのようなものは見当たりませんでした。

どのように確認しましたか。検証ツールで確認しましたか。

画像を見る限りでは、overflow: hidden;で隠されている感じです。
jQueryのslickはスライドアイテムを囲む要素を生成してそれに対してoverflow: hidden;を設定します(前後のアイテムを隠すため)。
おそらくそれが原因でしょう。

対策としては、slickが生成する要素のoverflowを上書きする。

css
1.slick-list {
2  overflow: visible!important;
3}

あるいは、アイテムの方に影が表示できる範囲を確保するためにマージンを設定する。

css
1.p-voice__item {
2    margin: 8px;
3}

他の部分のcss設定やレイアウトによりますので、試してみてどちらか適切な方を選択してください。

投稿2023/06/24 01:19

hatena19

総合スコア34345

この回答はGPT-4による自動生成回答です

box-shadowを使用して、角丸の影を実現できます。filter: drop-shadowの代わりに、以下のCSSを試してみてください。

css
1.p-voice__item {
2  border-radius: 30px;
3  background-color: #fff;
4  padding: 6.26666vw 8.333333vw;
5  box-shadow: 0 6px 6px rgba(99, 99, 99, 0.5);
6}