[分享]css关键字circle

CSS中的circle是一个非常常用的关键字之一，用于设置圆形形状。

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 使用circle关键字将元素设置为圆形 */
    background-color: yellow;
} 

在上述代码中，我们使用了.circle类来设置元素的圆形形状。其中的border-radius属性用于设置边框的圆角半径。当我们将圆角半径设置为元素宽度或高度的一半时，元素就会变成圆形。

除了使用circle关键字，我们还可以分别设置border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius属性来控制元素不同角的圆角半径，从而实现不同的形状效果。

.square {
    width: 100px;
    height: 100px;
    border-top-left-radius: 10px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 70px;
    background-color: green;
} 

在上述代码中，我们使用了.square类来设置元素的四个角的不同圆角半径，从而实现了一个不规则的四边形形状。

总的来说，CSS中的circle关键字是一个非常常用的属性之一，可以方便地实现元素的圆形或者不同角的圆角半径，从而实现各种不同的形状效果。