css怎么裁掉矩形的角 |单独的css文件怎么写

.square {
width: 200px;
height: 200px;
background-color: #e9e9e9;
border-radius: 20px;
}

在上面的代码中，大家创建了一个200×200的灰色正方形，它的边角被削弱了20像素。

border-radius属性可以接受1到4个值，这些值分别表示边角的半径。如果仅指定了一个值，则将应用于所有角。如果指定了两个值，第一个值将应用于左上角和右下角，第二个值将应用于右上角和左下角。如果指定了三个值，则第一个值将应用于左上角，第二个值将应用于右上角和左下角，第三个值将应用于右下角。如果指定了四个值，则将应用于左上角，右上角，右下角和左下角。

.rounded {
width: 200px;
height: 100px;
background-color: #e9e9e9;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}

在上面的代码中，大家创建了一个200×100的灰色矩形，仅其左上角和右上角被削弱了50像素。

大家可以应用border-radius属性来创建各种形状的元素，例如椭圆形和圆形：

.circle {
width: 200px;
height: 200px;
background-color: #e9e9e9;
border-radius: 50%;
}

在上面的代码中，大家创建了一个200×200的灰色圆形，半径为100像素。

在此示例中，大家使用border-radius属性的50％来将正方形变成圆形。这个值的大小与元素的宽度和高度有关。

通过使用border-radius属性，大家可以裁剪矩形的角，并创建各种形状的元素。在您的下一个项目中，为了增强元素的外观，请考虑使用border-radius属性。