css矩形底部变弧 |ci里的php文件无法显示css

/* 定义矩形 */
.rect {
width: 300px;
height: 200px;
background-color: #ccc;
position: relative; /* 要设置位置是因为要设置扇形遮罩的位置 */
}
/* 定义扇形遮罩 */
.rect::before {
content: "";
width: 300px;
height: 200px;
background-color: #fff;
position: absolute; /* 要用绝对定位 */
bottom: -100px; /* 要设置到底部的位置 */
left: 0px;
border-radius: 0 0 50% 50%; /* 只要顶部两个角是圆弧就好了 */
}

以上代码中，大家定义了一个名称为.rect的类，用来表示矩形。在类中，大家设置了宽度为300px，高度为200px，背景颜色为#ccc。要让矩形底部变成弧形，大家需要定义一个扇形遮罩，它的位置要在矩形下面，所以要用到绝对定位，并且将它的底部调整到负值，这样扇形就会把矩形底部遮掉，留下上方弧形的部分。在扇形遮罩中，大家还需要设置圆角半径，只设置顶部两个角的半径，让其看起来像是一个弧形。

以上就是使用CSS来让矩形底部变为弧形的方法，通过设置扇形遮罩可以让大家轻松实现弧形效果，增加网页的美观程度。