本文主要是介绍如何用html边框画同心圆,纯CSS图形 - padding圆形/同心圆,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
之前讲述过几个使用纯CSS制作的图形,比如三角形《border绘制三角形(各种角度)》
今天来分享下上图所示的使用CSS绘制同心圆,主要使用padding属性!
代码如下:
.box{
width: 100px; height: 100px;
border-radius: 50%;
padding: 10px;
border: 10px solid;
background-color: currentColor;
background-clip:content-box;
}
详细来说明下这段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的白色区域!
这篇关于如何用html边框画同心圆,纯CSS图形 - padding圆形/同心圆的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!