Question

我在Wordpress CMS上有革命滑块。我在Revolution Slider面板中实现了自定义css。当您第一次加载页面时，滑块在左上角和右下角四舍五入，但是当您调整窗口大小（稍微一点）时，圆角消失！我找不到罪魁祸首，响应能力应继续与自定义css一起使用，但事实并非如此。感谢您的任何帮助。 https://www.superherodigital.com/livescan/

我正在使用的代码。

-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;

Answer 1

不需要这些复杂的任务...

只需按照以下路径直接管理和...（文件管理器）

路径：

example.com/wp-content/plugins/revslider/public/assets/css/rs6

打开 rs6

使用 ctrl+f 并搜索 rs-module

rs-module { position:relative;overflow:hidden;display: block;border-radius:25px }

放置 border-radius:25px 或任何 35px , 45px ....... 就像上线......

Answer 2

这可能与滑块声明JS中的CSS属性（动态更改DOM属性），删除样式表中的任何应用样式有关。我可以看到你在#rev_slider_1_1_wrapper上应用这些声明。

我会为此添加一个类，并将边框半径应用于新类。

.rev-slider-border-radius {
    -webkit-border-top-left-radius: 50px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 50px;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 50px;
    -moz-border-radius-bottomleft: 0;
}

然后将类添加到滑块包装器元素，如果它在HTML中：

<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container avada-skin-rev-nav rev-slider-border-radius"> ... </div>

或者，如果JS正在生成这个，请在初始化滑块后通过JS 应用该类：

$(function() { $('.rev_slider_wrapper').addClass('rev-slider-border-radius'); });

Answer 3

您可以使用类舍入滑块在滑块旋转滑块周围添加包装器，其中roundslider类具有以下样式属性：

.roundedslider {

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
position: relative;
z-index: 1;
overflow: hidden;

}

这也适用于此处的示例：http://revolution.themepunch.com/home-slider-boxed/

关于ThemePunch产品的所有其他问题均在http://themepunch.com/support-center

处得到解答

希望这会对你有所帮助吗？

Answer 4

对我而言这很好用，只需在角落上替换你喜欢的滑块和半径：

.rev_slider, .rev_slider_wrapper, .rev_slider_wrapper img, .tp-revslider-mainul, .tp-revslider-slidesli
{
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
border-radius: 8px !important;
}

革命滑块 - 圆角

4 个答案: