一个div布局成一个扑克牌老k-html代码-BFW代码库

一个div布局成一个扑克牌老k

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
]</title>
<style>
body {
  background: #1e1d1b;
}

.card {
  display: block;
  position: absolute;
  top: calc(50% - 133px);
  left: calc(50% - 97px);
  width: 194px;
  height: 266px;
  border-radius: 14px;
  background: #eef1e6;
}
.card:before, .card:after {
  display: block;
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  --bs-red: #944534;
  --bs-yel: #fd9e3a;
  --bs-gre: #babab4;
  --bs-grd: #453f3a;
  --bs-bla: #1e1d1b;
  --bs-whi: #f0efe5;
  --bs-pin: #fbc696;
  --bs-blu: #2986bb;
  --spread: 0px;
  background: #944534;
}
.card:before {
  top: 16px;
  left: 16px;
}
.card:after {
  top: 244px;
  left: 172px;
  transform: rotate(180deg);
}

.card:before, .card:after {
  box-shadow: 0px 0px var(--spread) var(--bs-red), 12px 0px var(--spread) var(--bs-red), 48px 0px var(--spread) var(--bs-yel), 72px 0px var(--spread) var(--bs-yel), 96px 0px var(--spread) var(--bs-yel), 120px 0px var(--spread) var(--bs-gre), 0px 6px var(--spread) var(--bs-red), 6px 6px var(--spread) var(--bs-red), 48px 6px var(--spread) var(--bs-yel), 54px 6px var(--spread) var(--bs-yel), 66px 6px var(--spread) var(--bs-yel), 72px 6px var(--spread) var(--bs-yel), 78px 6px var(--spread) var(--bs-yel), 90px 6px var(--spread) var(--bs-yel), 96px 6px var(--spread) var(--bs-yel), 114px 6px var(--spread) var(--bs-gre), 132px 6px var(--spread) var(--bs-yel), 138px 6px var(--spread) var(--bs-yel), 0px 12px var(--spread) var(--bs-red), 12px 12px var(--spread) var(--bs-red), 48px 12px var(--spread) var(--bs-bla), 54px 12px var(--spread) var(--bs-yel), 60px 12px var(--spread) var(--bs-yel), 66px 12px var(--spread) var(--bs-yel), 72px 12px var(--spread) var(--bs-yel), 78px 12px var(--spread) var(--bs-yel), 84px 12px var(--spread) var(--bs-yel), 90px 12px var(--spread) var(--bs-yel), 96px 12px var(--spread) var(--bs-yel), 114px 12px var(--spread) var(--bs-gre), 120px 12px var(--spread) var(--bs-gre), 132px 12px var(--spread) var(--bs-bla), 138px 12px var(--spread) var(--bs-bla), 0px 18px var(--spread) var(--bs-red), 12px 18px var(--spread) var(--bs-red), 24px 18px var(--spread) var(--bs-bla), 30px 18px var(--spread) var(--bs-bla), 36px 18px var(--spread) var(--bs-bla), 42px 18px var(--spread) var(--bs-bla), 48px 18px var(--spread) var(--bs-red), 54px 18px var(--spread) var(--bs-bla), 60px 18.........完整代码请登录后点击上方下载按钮下载查看