Css 把图像做成一个圆圈

我有一个幻灯片上的图像。我想方形图像成为圆形使用css。 我在使用inspect element 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  -->

---

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

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

使用以下命令：

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

---

而实现这一点的最佳方法是使用：

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

您需要注意的是，在大多数情况下，您需要应用最小宽度和最小高度，否则在某些浏览器/使用中，您的结果可能与预期不符。

“我在使用inspect element b/c时遇到了困难，图像在幻灯片中”-那么请确保幻灯片不会自动启动，或者将幻灯片之间的计时器设置为一个非常高的值……那么就不应该再有任何东西妨碍您检查元素，只要您需要。