把图像变成一个圆圈答案

【问题标题】：make image into a circle把图像变成一个圆圈
【发布时间】：2015-06-30 19:16:21
【问题描述】：

我在this page 上有幻灯片中的图像。我希望使用 css 将方形图像变成圆形。我很难使用检查元素 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  -->

【问题讨论】：

“我很难使用检查元素 b/c 图像在幻灯片中” – 然后让幻灯片不自动开始，或者在滑动到一个非常高的值......那么只要你需要，就应该没有更多的东西阻碍检查元素。

标签： css wordpress

【解决方案1】：

使用这个：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

虽然实现此目的的最佳方法是使用：

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

您需要注意，在大多数情况下，您需要应用最小宽度和最小高度，否则在某些兄弟/用途中您的结果可能与预期不同。

【讨论】：