革命滑块 - 圆角答案

【问题标题】：Revolution Slider - Rounded Corners革命滑块 - 圆角
【发布时间】：2014-11-09 19:42:55
【问题描述】：

我在 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;

【问题讨论】：

标签： css wordpress revolution-slider

【解决方案1】：

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

只需在 Direct Admin 和 ...（文件管理器）中按照以下路径进行操作

路径：

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 ....... 像上线...

【讨论】：

【解决方案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');
});

【讨论】：

谢谢伙计，我希望它会起作用，但它没有。

【解决方案3】：

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

希望这对您有所帮助？

【讨论】：

【解决方案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;
}

【讨论】：