css三种圆饼 |css背景响应式

第一种是纯CSS圆饼。它是通过CSS的border-radius属性来创建的，代码如下：

.cicle{
width: 100px;
height: 100px;
border-radius: 50%;
}

上述代码中，大家将元素的宽度和高度都设置为100px，并将border-radius属性设置为50%，这样就可以得到一个完美的纯CSS圆饼。

第二种是渐变圆饼。它将不同的颜色渐变到一起，创建出一个渐变效果的圆饼。代码如下：

.gradient-cicle{
width: 100px;
height: 100px;
overflow: hidden;
background: linear-gradient(to bottom, #ff0084, #8200ff);
border-radius: 50%;
}

上述代码使用CSS的linear-gradient属性将两种不同颜色的渐变效果应用于圆饼中，创建出一个色彩丰富的渐变圆饼。

第三种是带有图片的圆饼。它可以将任何背景图片应用于圆饼之中。代码如下：

.image-cicle{
width: 100px;
height: 100px;
border-radius: 50%;
background: url('image.jpg') no-repeat center;
background-size: cover;
}

以上代码中，大家将一个背景图片应用于圆饼之中，并对其进行了一些常规样式的设置，从而得到一个具有图片背景的圆饼。

总而言之，这三种不同样式的圆饼都是使用CSS中的不同属性和技巧创建出来的。无论你是要创建一个简单的纯CSS圆饼，还是一个带有渐变效果或者背景图片的圆饼，CSS中都有相应的属性和技巧可以帮助你完成。希望这篇文章可以帮助你更好地理解CSS中的圆饼样式！