利用css3画个同心圆示例代码

在Web开发中，CSS3作为一个很强大的工具，可以用来为网页添加各种视觉效果。本文将介绍如何使用CSS3画一个同心圆，并且进行样式设置。

1. 基础知识介绍

---------------

在CSS3中，我们可以通过border属性来设置边框样式，而且可以设置边框的不同颜色、宽度和样式，边框的样式可以是实线、虚线、点线、双线等等。可以通过border-radius属性设置边框的圆角大小，目前较常用的是通过border-radius属性来设置一个元素的圆角角度，值可以是长度单位或百分比。

接下来是一个实现的示例代码：

.pre{
  border-radius: 50%;
  width: 200px;
  height: 200px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #666;
  border-top: 1px solid #666;
}

2. CSS3画同心圆代码实现

----------------------

下面是实现CSS3画一个同心圆的代码：

.pre{
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
}
.pre:before,
.pre:after{
  content: '';
  position: absolute;
  border-radius: 50%;
}
.pre:before{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  z-index: -1;
}
.pre:after{
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid #666;
  z-index: -2;
}

上面的代码中，我们使用pseduo-elements创建了一个:before和一个:after元素，而这两个元素都被设置为圆形，其中:before元素为黑色，:after元素为灰色, 随着top、left、right和bottom的值的增加，圆就会变得更大，成为同心圆。

3. 总结

--------

本文通过代码示例的形式为大家介绍了如何通过CSS3画同心圆，并且实现了样式化设置。掌握了CSS3的基本知识之后，开发者们可以实现更加炫酷的效果，给用户带来更好的视觉体验。