[分享]css3实心圆

CSS3中实心圆的绘制，可以通过borderradius属性来实现。borderradius属性可以设置4个值来分别控制四个角的曲度，也可以设置2个值来同时控制水平和垂直方向的圆角，还可以设置1个值来...

CSS3中实心圆的绘制，可以通过border-radius属性来实现。border-radius属性可以设置4个值来分别控制四个角的曲度，也可以设置2个值来同时控制水平和垂直方向的圆角，还可以设置1个值来统一设置四个角的曲度。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 设置1个值来统一设置四个角的曲度，实现圆形 */
  background-color: #f00; /* 设置背景色 */
} 

通过以上代码，可以快速绘制一个实心圆形。如果需要绘制其他形状的圆角图形，则可以设置多个值来分别控制不同角的曲度，也可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius等属性来单独控制某个角。

除了控制角的曲度，CSS3还可以通过box-shadow属性来实现圆形的投影效果。box-shadow可以设置多个值来实现多重投影效果。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 设置1个值来统一设置四个角的曲度，实现圆形 */
  background-color: #f00; /* 设置背景色 */
  box-shadow: 1px 1px 3px #999; /* 设置投影效果 */
} 

通过以上代码，可以实现一个带有投影效果的实心圆形。