css中如何切割背景

场景说明：

这是效果图  ， 我们想要实现前面方块选中的状态    但是一般我们只能是这样的

当我们使用element多选框简单的现实这样的粗略的效果的时候 可以看到这个是蓝色是完全占据整个背景的  ，同时还多了这个√。

初步代码：

<div class="box1">
      <div v-for="it in 4" class="flex flex-row">
        <el-checkbox :value="it % 2 != 0" :checked="it % 2 != 0" label="是" size="large" />
        <el-checkbox :value="it % 2 == 0" :checked="it % 2 == 0" label="否" size="large" />
      </div>
    </div>

首先解决第一个问题：颜色全部占据整个背景

        

当我们将基础的样式修改好之后 我们只需要在在选中的的class属性中 添加：

.el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #f55454;
      border-color: #fff;
      width: 25px;
      height: 25px;
      padding: 4px;
      background-clip: content-box;

    }

这几行代码，占据背景色的大小，内边距，以及切割背景的属性 background-clip: content-box;

就可以实现了。

第二个问题：去除对号问题

 .el-checkbox__input.is-checked .el-checkbox__inner::after {
      display: none;
    }

就这样。两个问题就都解决了。

还有另一种方法:

通过div盒子来实现：

这就简单的实现了 。

说个题外话：各位前端的伙伴们，现在前端找工作难不难呀。想换工作，但是感觉会的远远不够，又怕找不到，找到了又没有现在这个工作合适。有经验的伙伴可以分享一下啊