owl轮播中的项目上的方框阴影被剪切
owl轮播中的项目上的方框阴影被剪切
提问于 2018-01-18 20:28:17
我在我的猫头鹰旋转木马中的每个元素上都有一个长方体阴影。问题是，由于owl-carousel使用的overflow: hidden，大多数元素的Box阴影都被切断了。我怎么才能避免这个问题呢？
回答 6
Stack Overflow用户
回答已采纳
发布于 2018-01-19 09:43:34
来回答我自己的问题。解决此问题的方法是在外部舞台上设置overflow: visible。隐藏所有不透明度为0的活动元素，然后为了平滑而转换不透明度。
.owl-stage-outer {
overflow: visible;
}
.owl-item {
opacity: 0;
transition: opacity 500ms;
}
.owl-item.active {
opacity: 1;
}。
Stack Overflow用户
发布于 2018-05-10 03:50:42
或者您可以尝试将边距添加到类中：
.owl-stage{
margin: 30px;}Stack Overflow用户
发布于 2019-05-08 16:39:57
这个问题的答案有点晚了，但对于任何仍在疑惑的人来说：
假设这是一个包含多个项目的轮播，在owl阶段包装器中添加一些空白：
.owl-stage{
margin: 24px;
overflow: visible;
}然后仅将长方体阴影应用于活动项目，并在更改时进行过渡：
.owl-item {
box-shadow: 0;
transition: 1s all;
webkit-transition: 1s all;
}
.active {
box-shadow: 0 0 14px 0 rgba(74,74,74,0.20);
}在我的例子中，我有一个包含三个项目的旋转木马，所以当框阴影应用于owl项目时，它是凌乱的，看起来被切断了，上面的方法纠正了这一点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48321377
复制相关文章
相似问题