Yêu cầu thg 9 16, 2022 4:15 SA 129 1 2
  • 129 1 2
+1

Làm sao để hiệu ứng box-shadow của element con không bị giới hạn bởi width height của element cha

Chia sẻ
  • 129 1 2

Mình đang hiển thị các item sử dụng carousel của bootstrap và các item của mình có thuộc tính box-shadow, tuy nhiên thuộc tính này bị giới hạn bởi phần tử cha bao bọc nó.

image.png

Có cách nào để nó không bị giới hạn ngoài việc sử dụng margin, padding không ạ? Mình đã thử nhưng thấy không có hiệu quả là mấy nó sẽ làm vỡ khối. Mong các bác có giải pháp ^^ thanks mn

thg 9 16, 2022 1:31 CH

alo bạn ơi css3 anime chỉ làm được 1 hình vuông có màu sắc chạy qua chạy lại à

Avatar Đạt Trần @zeronine
thg 9 17, 2022 9:01 SA

box-shadow thực chất không bị giới hạn bởi phần tử cha, nó có thể overflow mà vẫn hiển thị bình thường. Do bạn đã có 1 box-shadow inset rồi, nếu bạn muốn có thêm 1 box-shadow bên ngoài nữa thì bạn cứ viết tiếp, ngăn cách bởi dấu phẩy. Ví dụ ở đây:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#examples

image.png

Avatar Phạm Duy Vũ @binchanhkun99
thg 9 18, 2022 4:22 CH

@zeronine vâng ạ thanks bác

Avatar Phạm Duy Vũ @binchanhkun99
thg 9 18, 2022 4:34 CH

@zeronine cơ mà nó vẫn bị giới hạn bác ạ . e không dùng carousel thì k sao mà cứ import carousel thì bị. Trong khi box shadow e để đơn giản

background: #FFFFFF;
box-shadow: 0px 15px 94px rgba(0, 56, 139, 0.13);

các div cha thì vẫn bình thường mà nó lại ko overflow dc như khi ko cho thêm hiệu ứng slider vào >_>

2 CÂU TRẢ LỜI


Đã trả lời thg 9 23, 2022 4:27 SA
+1

Bác dùng overflow: visitble rồi cho item active opacity: 1 ngược lại không active 0. Nếu nó bị rật rật chỉ transition time cho item.

Chia sẻ
Đã trả lời thg 9 19, 2022 1:12 SA
0

Hẳn là do overflow: hidden của carousel bọc ngoài rồi bạn ạ, chắc không còn cách nào khác ngoài tăng margin/padding cho content bên trong để box-shadow không bị che đi thôi.

Chia sẻ
Avatar Phạm Duy Vũ @binchanhkun99
thg 9 19, 2022 3:09 SA

@khangnd vâng a ạ em để overflow thành visitble thì dc cơ mà nó show hẳn cái băng chuyền ra luôn =))) nên e đành đổ bóng theo chiều khác cho bớt vướng😅

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí