css实现各式各样的box图案阴影效果-html代码-BFW代码库

代码语言：html

代码描述：css实现各式各样的box图案阴影效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.tile {
  width: 200px;
  height: 200px;
}
.v1 {
  position: relative;
}
.v1::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  background-color: #55efc4;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px #55efc4, 0px 45px #55efc4, 0px 90px #55efc4, 0px 135px #55efc4, 0px 180px #55efc4, 45px 0px #55efc4, 45px 45px #55efc4, 45px 90px #55efc4, 45px 135px #55efc4, 45px 180px #55efc4, 90px 0px #55efc4, 90px 45px #55efc4, 90px 90px #55efc4, 90px 135px #55efc4, 90px 180px #55efc4, 135px 0px #55efc4, 135px 45px #55efc4, 135px 90px #55efc4, 135px 135px #55efc4, 135px 180px #55efc4, 180px 0px #55efc4, 180px 45px #55efc4, 180px 90px #55efc4, 180px 135px #55efc4, 180px 180px #55efc4;
}
.v2 {
  position: relative;
}
.v2::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  background-color: #f368e0;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px #f368e0, 0px 45px #f368e0, 0px 90px #f368e0, 0px 135px #f368e0, 0px 180px #f368e0, 45px 0px #f368e0, 45px 45px #f368e0, 45px 90px #f368e0, 45px 135px #f368e0, 45px 180px #f368e0, 90px 0px #f368e0, 90px 45px #f368e0, 90px 90px #f368e0, 90px 135px #f368e0, 90px 180px #f368e0, 135px 0px #f368e0, 135px 45px #f368e0, 135px 90px #f368e0, 135px 135px #f368e0, 135px 180px #f368e0, 180px 0px #f368e0, 180px 45px #f368e0, 180px 90px #f368e0, 180px 135px #f368e0, 180px 180px #f368e0;
  border-radius: 50%;
}
.v3 {
  position: relative;
}
.v3::after {
  content: '';
  position: absolute;
  top: 16.666666666666668px;
  left: 16.666666666666668px;
  transform: translate(-50%, -50%);
  background-color: #1b9cfc;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px #1b9cfc, 0px 41.66666666666667px #1b9cfc, 0px 83.33333333333334px #1b9cfc, 0px 125.00000000000001px #1b9cfc, 0px 166.66666666666669px #1b9cfc, 41.66666666666667px 0px #1b9cfc, 41.66666666666667px 41.66666666666667px #1b9cfc, 41.66666666666667px 83.33333333333334px #1b9cfc, 41.66666666666667px 125.00000000000001px #1b9cfc, 41.66666666666667px 166.66666666666669px #1b9cfc, 83.33333333333334px 0px #1b9cfc, 83.33333333333334px 41.66666666666667px #1b9cfc, 83.33333333333334px 83.33333333333334px #1b9cfc, 83.33333333333334px 125.00000000000001px #1b9cfc, 83.33333333333334px 166.66666666666669px #1b9cfc, 125.00000000000001px 0px #1b9cfc, 125.00000000000001px 41.66666666666667px #1b9cfc, 125.00000000000001px 83.33333333333334px #1b9cfc, 125.00000000000001px 125.00000000000001px #1b9cfc, 125.00000000000001px 166.66666666666669px #1b9cfc, 166.66666666666669px 0px #1b9cfc, 166.66666666666669px 41.66666666666667px #1b9cfc, 166.66666666666669px 83.33333333333334px #1b9cfc, 166.66666666666669px 125.00000000000001px #1b9cfc, 166.66666666666669px 166.66666666666669px #1b9cfc;
}
.v3 {
  position: relative;
}
.v3::before {
  content: '';
  position: absolute;
  top: 36.66666666666667px;
  left: 36.66666666666667px;
  transform: translate(-50%, -50%);
  background-color: #25ccf7;
  width: 33.333333333333336px;
  height: 33.333333333333336px;
  box-shadow: 0px 0px #25ccf7, 0px 42.22222222222222px #25ccf7, 0px 84.44444444444444px #25ccf7, 0px 126.66666666666666px #25ccf7, 42.22222222222222px 0px #25ccf7, 42.22222222222222px 42.22222222222222px #25ccf7, 42.22222222222222px 84.44444444444444px #25ccf7, 42.22222222222222px 126.66666666666666px #25ccf7, 84.44444444444444px 0px #25ccf7, 84.44444444444444px 42.22222222222222px #25ccf7, 84.44444444444444px 84.44444444444444px #25ccf7, 84.44444444444444px 126.66666666666666px #25ccf7, 126.66666666666666px 0px #25ccf7, 126.66666666666666px 42.22222222222222px #25ccf7, 126.66666666666666px 84.44444444444444px #25ccf7, 126.66666666666666px 126.66666666666666px #25ccf7;
  border-radius: 50%;
}
.v4 {
  background: #fc427b;
}
.v4 {
  position: relative;
}
.v4::before {
  content: '';
  position: absolute;
  top: 16.666666666666668px;
  left: 16.666666666666668px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 33.333333333333336px;
  height: 33.333333333333336px;
  box-shadow: 0px 0px #fff, 0px 33.333333333333336px #fff, 0px 66.66666666666667px #fff, 0px 100px #fff, 0px 133.33333333333334px #fff, 0px 166.66666666666669px #fff, 33.333333333333336px 0px #fff, 33.333333333333336px 33.333333333333336px #fff, 33.333333333333336px 66.66666666666667px #fff, 33.333333333333336px 100px #fff, 33.333333333333336px 133.33333333333334px #fff, 33.333333333333336px 166.66666666666669px #fff, 66.66666666666667px 0px #fff, 66.66666666666667px 33.333333333333336px #fff, 66.66666666666667px 66.66666666666667px #fff, 66.66666666666667px 100px #fff, 66.66666666666667px 133.33333333333334px #fff, 66.66666666666667px 166.66666666666669px #fff, 100px 0px #fff, 100px 33.333333333333336px #fff, 100px 66.66666666666667px #fff, 100px 100px #fff, 100px 133.33333333333334px #fff, 100px 166.66666666666669px #fff, 133.33333333333334px 0px #fff, 133.33333333333334px 33.333333333333336px #fff, 133.33333333333334px 66.66666666666667px #fff, 133.33333333333334px 100px #fff, 133.33333333333334px 133.33333333333334px #fff, 133.33333333333334px 166.66666666666669px #fff, 166.66666666666669px 0px #fff, 166.66666666666669px 33.333333333333336px #fff, 166.66666666666669px 66.66666666666667px #fff, 166.66666666666669px 100px #fff, 166.66666666666669px 133.33333333333334px #fff, 166.66666666666669px 166.66666666666669px #fff;
  border-radius: 50%;
}
.v5 {
  background: #686de0;
}
.v5 {
  position: relative;
}
.v5::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 40px;
  height: 40px;
  box-shadow: 0px 0px #fff, 0px 40px #fff, 0px 80px #fff, 0px 120px #fff, 0px 160px #fff, 40px 0px #fff, 40px 40px #f.........完整代码请登录后点击上方下载按钮下载查看