• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

纯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的白色区域！

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。