css学习记录

#1.修改单选框组达到ui要求#

  display: flex;
  flex-wrap: wrap;
  .el-checkbox-button {
    margin-bottom: 10px;
    /deep/ .el-checkbox-button__inner {
      width: 100px;
      height: 32px;
      line-height: 32px;
      padding: 0px 4px;
      display: inline-block;
      box-sizing: border-box;
      border: 1px solid #cccccc;
      border-radius: 2px;
      font-size: 14px;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .is-checked /deep/.el-checkbox-button__inner {
    background: #fff;
    border: none;
    color: #3699ff;
    border: 1px solid #3699ff;
  }
  /deep/ label:not(:nth-child(5n)) {
    margin-right: 10px;
  }
  /deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
    box-shadow: 0 0 0 0;
  }
  /deep/.el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 0 0 0 0;
  }

  /deep/ .el-checkbox-button:first-child .el-checkbox-button__inner {
    border-radius: 0 0 0 0;
  }
}

最终效果如下图，实现在弹窗中选择指定元素功能