革命滑块 - 圆角

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 { 位置：相对；溢出：隐藏；显示：块；边界半径：25px }

把 border-radius:25px 或任何东西 35px , 45px ....... 像 up line ...

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

您可以使用 roundedslider 类在滑块旋转滑块周围添加包装器，其中 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;
}