刚发现一个 CSS 活用案例，顺便来说下你都见过哪些类似的奇技淫巧

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这个应该还算蛮基础的用法，用 CSS 画多选按钮来保证所有浏览器的样式都一致：

<label class="checkbox">hover to simulate check action</label>

:root {
  font-size: 80px;
  --box-width: 1em;
  --box-height: 1em;
}

.checkbox {
  position: relative;
  display: inline-block;
  padding-left: 1.5em;
  vertical-align: middle;
  cursor: pointer;
}

.checkbox::before,
.checkbox::after {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: calc(-0.5 * var(--box-height));
  content: "";
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}

.checkbox::before {
  border: .0625em solid #e0e0e0;
  box-shadow: 0 0 .0625em 0 rgba(0, 0, 0, .1);
  background-color: #fff;
  border-radius: .2em;
}

.checkbox:hover::after {
  margin-top: calc(-0.4 * var(--box-height));
  margin-left: calc(0.1 * var(--box-width));
  box-sizing: border-box;
  width: calc(var(--box-width) * 0.8);
  height: calc(var(--box-height) * 0.5);
  border-left: .1875em solid #7b1451;
  border-bottom: .1875em solid #7b1451;
  transform: rotate(-60deg) skew(-20deg);
}

有没有什么更好的实现方式？另外还有哪些类似的“奇技淫巧”，欢迎各位 CSS 大佬来秀操作，想开开眼界~

6 条回复 • 2024-05-28 10:27:14 +08:00