Question

我在this page的幻灯片中有图片。我希望方形图像使用css成为circluar。我很难使用检查元素b / c图像是幻灯片放映。我可以使用哪一类来添加边缘半径，以使意大利面沙拉/土豆的方形图像成圆形？

<div id="rev_slider_22_3_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:400px;">
    <div id="rev_slider_22_3" class="rev_slider fullwidthabanner" style="display:none;max-height:400px;height:400px;">
<ul>    <!-- SLIDE  -->
    <li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300"  data-saveperformance="off" >
        <!-- MAIN IMAGE -->
        <img src="http://xxx.image.jpg"  alt="challah-1"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
        <!-- LAYERS -->
    </li>
    <!-- SLIDE  -->
    <li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300"  data-saveperformance="off" >
        <!-- MAIN IMAGE -->
        <img src="http://xxx/meatballs.jpg"  alt="matza-balls"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
        <!-- LAYERS -->
    </li>
    <!-- SLIDE  -->

Answer 1

Use this:

.tp-simpleresponsive >ul li {
    border-radius: 50%;
}
.rev_slider_wrapper {
    background-color: transparent !important;
}

Answer 2

您可以将边框半径50％应用于方形图像，使其成为圆形。

.circular-image {
   border-radius: 50%;
}

Answer 3

虽然实现这一目标的最佳方法是使用：

.circular-image {
   border-radius: 50%;
}

您需要注意的是，在大多数情况下，您需要应用最小宽度和最小高度，否则您的结果可能与某些较大的布料/用途不符合预期。

将图像变成圆形

3 个答案: