css我爱编程

想要得到一个高宽相等会自适应的圆形

2018-05-22  本文已影响46人  Lia代码猪崽

分析一下需求:

  • 首先,宽度应该是自适应的,我用了bootstrap的栅格化,可以用百分比等其他自适应方式实现。
  • 高度与宽度相等。
  • 圆形。

这里的难点在于,高度与宽度相等,我使用了padding属性。
当padding的值的单位是百分比%时,都是基于父元素的宽度的百分比。
根据盒子模型:元素的宽度 = 左右边框 + 左右内边距 + 内容宽度

W3C--padding属性可能的值
W3C--盒子模型

代码:

<div class="row">
  <div class="col-md-4 border">
    <div class="jf-home-services-wrap"></div>
  </div>
  <div class="col-md-4">123</div>
  <div class="col-md-4">123</div>
</div>
.jf-home-services-wrap {
    width: 100%;
    background: #409eff;
    padding: 50% 0;
    border-radius: 100%;
}
.border {
    border: 1px solid red;
}
高度会随着宽度的改变而改变
上一篇 下一篇

猜你喜欢

热点阅读