纯CSS图形 - padding圆形/同心圆

老白 2年前 1147浏览 0评论

多层圈圈CSSpadding制作.png 纯CSS图形 - padding圆形/同心圆 CSS学习

之前讲述过几个使用纯CSS制作的图形,比如三角形《border绘制三角形(各种角度)

三横线《三横线(三道杠)padding制作出来》、《border-style:double制作三横线

今天来分享下上图所示的使用CSS绘制同心圆,主要使用padding属性!

代码如下:

<style>
 .box{
    width: 100px; height: 100px;
  border-radius: 50%;
  padding: 10px;
  border: 10px solid;
  background-color: currentColor;
  background-clip:content-box;
 }

</style>

<div class="box"></div>

详细来说明下这段CSS属性的含义:

width: 100px; height: 100px就不用说了吧,先预设高和宽都为100px

border-radius:50%,意思为圆角50%,这是必须的!

padding:10px,透明边距为10px,就是同心圆空白区域

border:10px solid,10px边框,就是同心圆外部黑色圆圈了

background-color: currentColor; 当前的标签所继承的文字颜色,也可自定义颜色值

background-clip:content-box;这句话是只让背景色在内容区域显示,padding不算内容区了,所以padding那白色的10px就不会被使用背景色了,所以才存在10px的白色区域!

发表评论