Asked Sep 16th, 4:15 a.m. 108 1 2
  • 108 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

Share
  • 108 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

Sep 16th, 1:31 p.m.

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 à

0
| Reply
Share
Avatar Đạt Trần @zeronine
Sep 17th, 9:01 a.m.

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

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Sep 18th, 4:22 p.m.

@zeronine vâng ạ thanks bác

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Sep 18th, 4:34 p.m.

@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 >_>

0
| Reply
Share

2 ANSWERS


Answered Sep 23rd, 4:27 a.m.
+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.

Share
Answered Sep 19th, 1:12 a.m.
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.

Share
Avatar Phạm Duy Vũ @binchanhkun99
Sep 19th, 3:09 a.m.

@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😅

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.