[分享]css两头圆的长方形

CSS 的两头圆长方形可以通过 borderradius 属性设置，该属性可以控制边框的圆角程度。两个值分别用于控制左上角和右上角的圆角半径，或者左下角和右下角的圆角半径。 .box { border...

CSS 的两头圆长方形可以通过 border-radius 属性设置，该属性可以控制边框的圆角程度。两个值分别用于控制左上角和右上角的圆角半径，或者左下角和右下角的圆角半径。

.box {
    border-radius: 30px 0 0 30px; 
    /* 上左下右，左上和右下为30px，其余为0 */
} 

以上代码中，box 类设置了两头圆长方形的样式，其中 border-radius 属性用于控制圆角半径。该属性的值为 30px 0 0 30px，表示左上角和右下角的圆角半径为 30px，其余角为直角。

此外，可以通过设置背景色来使两头圆长方形更美观，如下所示：

.box {
    border-radius: 30px 0 0 30px; 
    background-color: #f2f2f2;
} 

.box 类添加了背景颜色属性 background-color，设置为 #f2f2f2，使长方形具有更好的可读性和美观性。

综上所述，通过 border-radius 属性和背景颜色的设置，可以轻松实现两头圆的长方形样式，为网页设计带来更加多样化的效果。