+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
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ó.
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
2 CÂU TRẢ LỜI
+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.
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.
@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😅
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 à
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
@zeronine vâng ạ thanks bác
@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
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 >_>