如何将商品变成圆形展示图片

代码(可以整体复制以下代码粘贴到html.erb文件当中去查看页面效果)：

<style>

.box-e {

        background-color: #edeeee;

width: 100%;

        overflow: auto;

        clear: both;

        position: relative;

}

  .e-row1,.e-row2 {

        width: 100%;

        height: 340px;

        background-color: grey;

    }

    .e1,.e2,.e3,.e4,.e5,.e6 {

        height: 340px;

        float: left;

width:33%;

    }

    .e-square {

        height: 260px;

        width: 260px;

        background-color: white;

        border-radius: 200px;

        margin: 40px auto 0;

        overflow: hidden;

    }

    .e-square:hover {

        box-shadow: #42455F 0 1px 5px;

    }

a{

color:grey;

text-decoration:none;

}

a:hover{

color:orange;

}

</style>

<div class="box-e"> 

    <div class="e1"> 

<div class="e-square"> 

<img src="https://ooo.0o0.ooo/2017/02/12/58a03d25d9ce8.jpg" alt="" width="260" height="260"  class="circle-img"> 

</div> 

<h4 style="text-align:center;"><a href="products/1">储物柜</a></h4> 

    </div> 

    <div class="e2"> 

      <div class="e-square"> 

<img src="https://ooo.0o0.ooo/2017/02/12/58a03d2609f7c.jpg" alt="" width="260" height="260"  class="circle-img"> 

      </div> 

      <h4 style="text-align:center;"><a href="products/2">木椅</a></h4> 

    </div> 

<div class="e3"> 

   <div class="e-square"> 

<img src="https://ooo.0o0.ooo/2017/02/12/58a03d262025f.jpg" alt="" width="260" height="260"  class="circle-img"> 

   </div> 

    <h4 style="text-align:center;"><a href="products/5">高背椅</a></h4> 

</div> 

    <div class="e4"> 

      <div class="e-square"> 

<img src="https://ooo.0o0.ooo/2017/02/12/58a03d262db56.jpg" alt="" width="260" height="260"  class="circle-img"> 

      </div> 

      <h4 style="text-align:center;"><a href="products/3">办公桌椅</a></h4> 

    </div> 

    <div class="e5"> 

      <div class="e-square"> 

<img src="https://ooo.0o0.ooo/2017/02/12/58a03d264cbb0.jpg" alt="" width="260" height="260"  class="circle-img"> 

      </div> 

        <h4 style="text-align:center;"><a href="products/16">复古灯</a></h4> 

    </div> 

    <div class="e6"> 

      <div class="e-square"> 

<img src="https://ooo.0o0.ooo/2017/02/12/58a03d2656f51.jpg" alt="" width="260" height="260"  class="circle-img"> 

      </div> 

        <h4 style="text-align:center;"><a href="products/12">青蛙饰品</a></h4> 

    </div> 

</div> 

讲解：

方形变圆形办法：

e-square的宽和高分别是：

   height: 260px;

        width: 260px;

则border-radius（意为边框圆角）后面的值只要大于260的一半，即可以把方形变成圆形。

如果有任何疑问欢迎联系：zhongweninri（微信）