clip-path裁剪样式

1、问题：接手了一个之前别人的项目，要给一个组件添加主题切换的功能，组件的顶部背景是一张图片（篮框框起来的部分），用了32k空间，当切换主题的时候要更换不同的图片，就当自己是个切图仔了？坚决不切图，咱们用css代替不成吗，不占空间又方便修改颜色

 2、思路：这里就用到了clip-path属性，通过clip-path属性中的basic-shape来裁剪元素使其展示出自己想要的形状，我这里用了椭圆来裁剪出底部的边。

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性有以下：

clip-source    用 URL 表示剪切元素的路径
basic-shape    将元素裁剪为基本形状：圆形、椭圆形、多边形或插图
margin-box    使用外边距框作为引用框
border-box    使用边框作为引用框
padding-box    使用内边距框作为引用框
content-box    使用内容框作为引用框
fill-box    使用对象边界框作为引用框
stroke-box    使用笔触边界框（stroke bounding box）作为引用框
view-box    使用最近的 SVG 视口（viewport）作为引用框。
none    这是默认设置。 没有剪辑
initial    设置属性为默认值。 
inherit    属性值从父元素继承。 

其中<basic-shape>是一种表现基础图形的CSS数据类型，作用于clip-path 与 shape-outside 属性中。类型有以下：

clip-path: inset(22% 12% 15px 35px);     //矩形
clip-path: circle(6rem at 12rem 8rem);     //园
clip-path: ellipse(115px 55px at 50% 40%);     //椭圆
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);     //多边形
clip-path: path('M 50,245 A 160,160 0,0,1 360,120 z')     //半圆

3、实现：

.t_imgbox{
  height: 88rpx;
  width: 100%;
  background-color: var(--bg);
  border-radius: 20rpx;
  clip-path: ellipse(750rpx 100rpx at 50% -12rpx);
}

4、效果