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 #fff, 40px 80px #fff, 40px 120px #fff, 40px 160px #fff, 80px 0px #fff, 80px 40px #fff, 80px 80px #fff, 80px 120px #fff, 80px 160px #fff, 120px 0px #fff, 120px 40px #fff, 120px 80px #fff, 120px 120px #fff, 120px 160px #fff, 160px 0px #fff, 160px 40px #fff, 160px 80px #fff, 160px 120px #fff, 160px 160px #fff;
  border-radius: 50%;
}
.v5 {
  position: relative;
}
.v5::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  background-color: #686de0;
  width: 13.333333333333334px;
  height: 13.333333333333334px;
  box-shadow: 0px 0px #686de0, 0px 20px #686de0, 0px 40px #686de0, 0px 60px #686de0, 0px 80px #686de0, 0px 100px #686de0, 0px 120px #686de0, 0px 140px #686de0, 0px 160px #686de0, 0px 180px #686de0, 20px 0px #686de0, 20px 20px #686de0, 20px 40px #686de0, 20px 60px #686de0, 20px 80px #686de0, 20px 100px #686de0, 20px 120px #686de0, 20px 140px #686de0, 20px 160px #686de0, 20px 180px #686de0, 40px 0px #686de0, 40px 20px #686de0, 40px 40px #686de0, 40px 60px #686de0, 40px 80px #686de0, 40px 100px #686de0, 40px 120px #686de0, 40px 140px #686de0, 40px 160px #686de0, 40px 180px #686de0, 60px 0px #686de0, 60px 20px #686de0, 60px 40px #686de0, 60px 60px #686de0, 60px 80px #686de0, 60px 100px #686de0, 60px 120px #686de0, 60px 140px #686de0, 60px 160px #686de0, 60px 180px #686de0, 80px 0px #686de0, 80px 20px #686de0, 80px 40px #686de0, 80px 60px #686de0, 80px 80px #686de0, 80px 100px #686de0, 80px 120px #686de0, 80px 140px #686de0, 80px 160px #686de0, 80px 180px #686de0, 100px 0px #686de0, 100px 20px #686de0, 100px 40px #686de0, 100px 60px #686de0, 100px 80px #686de0, 100px 100px #686de0, 100px 120px #686de0, 100px 140px #686de0, 100px 160px #686de0, 100px 180px #686de0, 120px 0px #686de0, 120px 20px #686de0, 120px 40px #686de0, 120px 60px #686de0, 120px 80px #686de0, 120px 100px #686de0, 120px 120px #686de0, 120px 140px #686de0, 120px 160px #686de0, 120px 180px #686de0, 140px 0px #686de0, 140px 20px #686de0, 140px 40px #686de0, 140px 60px #686de0, 140px 80px #686de0, 140px 100px #686de0, 140px 120px #686de0, 140px 140px #686de0, 140px 160px #686de0, 140px 180px #686de0, 160px 0px #686de0, 160px 20px #686de0, 160px 40px #686de0, 160px 60px #686de0, 160px 80px #686de0, 160px 100px #686de0, 160px 120px #686de0, 160px 140px #686de0, 160px 160px #686de0, 160px 180px #686de0, 180px 0px #686de0, 180px 20px #686de0, 180px 40px #686de0, 180px 60px #686de0, 180px 80px #686de0, 180px 100px #686de0, 180px 120px #686de0, 180px 140px #686de0, 180px 160px #686de0, 180px 180px #686de0;
  border-radius: 50%;
}
.v6 {
  background: #ff7675;
}
.v6 {
  position: relative;
}
.v6::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 #fff, 40px 80px #fff, 40px 120px #fff, 40px 160px #fff, 80px 0px #fff, 80px 40px #fff, 80px 80px #fff, 80px 120px #fff, 80px 160px #fff, 120px 0px #fff, 120px 40px #fff, 120px 80px #fff, 120px 120px #fff, 120px 160px #fff, 160px 0px #fff, 160px 40px #fff, 160px 80px #fff, 160px 120px #fff, 160px 160px #fff;
  border-radius: 50%;
}
.v6 {
  position: relative;
}
.v6::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
  background-color: #ff7675;
  width: 13.333333333333334px;
  height: 13.333333333333334px;
  box-shadow: 0px 0px #ff7675, 0px 20px #ff7675, 0px 40px #ff7675, 0px 60px #ff7675, 0px 80px #ff7675, 0px 100px #ff7675, 0px 120px #ff7675, 0px 140px #ff7675, 0px 160px #ff7675, 0px 180px #ff7675, 20px 0px #ff7675, 20px 20px #ff7675, 20px 40px #ff7675, 20px 60px #ff7675, 20px 80px #ff7675, 20px 100px #ff7675, 20px 120px #ff7675, 20px 140px #ff7675, 20px 160px #ff7675, 20px 180px #ff7675, 40px 0px #ff7675, 40px 20px #ff7675, 40px 40px #ff7675, 40px 60px #ff7675, 40px 80px #ff7675, 40px 100px #ff7675, 40px 120px #ff7675, 40px 140px #ff7675, 40px 160px #ff7675, 40px 180px #ff7675, 60px 0px #ff7675, 60px 20px #ff7675, 60px 40px #ff7675, 60px 60px #ff7675, 60px 80px #ff7675, 60px 100px #ff7675, 60px 120px #ff7675, 60px 140px #ff7675, 60px 160px #ff7675, 60px 180px #ff7675, 80px 0px #ff7675, 80px 20px #ff7675, 80px 40px #ff7675, 80px 60px #ff7675, 80px 80px #ff7675, 80px 100px #ff7675, 80px 120px #ff7675, 80px 140px #ff7675, 80px 160px #ff7675, 80px 180px #ff7675, 100px 0px #ff7675, 100px 20px #ff7675, 100px 40px #ff7675, 100px 60px #ff7675, 100px 80px #ff7675, 100px 100px #ff7675, 100px 120px #ff7675, 100px 140px #ff7675, 100px 160px #ff7675, 100px 180px #ff7675, 120px 0px #ff7675, 120px 20px #ff7675, 120px 40px #ff7675, 120px 60px #ff7675, 120px 80px #ff7675, 120px 100px #ff7675, 120px 120px #ff7675, 120px 140px #ff7675, 120px 160px #ff7675, 120px 180px #ff7675, 140px 0px #ff7675, 140px 20px #ff7675, 140px 40px #ff7675, 140px 60px #ff7675, 140px 80px #ff7675, 140px 100px #ff7675, 140px 120px #ff7675, 140px 140px #ff7675, 140px 160px #ff7675, 140px 180px #ff7675, 160px 0px #ff7675, 160px 20px #ff7675, 160px 40px #ff7675, 160px 60px #ff7675, 160px 80px #ff7675, 160px 100px #ff7675, 160px 120px #ff7675, 160px 140px #ff7675, 160px 160px #ff7675, 160px 180px #ff7675, 180px 0px #ff7675, 180px 20px #ff7675, 180px 40px #ff7675, 180px 60px #ff7675, 180px 80px #ff7675, 180px 100px #ff7675, 180px 120px #ff7675, 180px 140px #ff7675, 180px 160px #ff7675, 180px 180px #ff7675;
}
.v7 {
  position: relative;
}
.v7::after {
  content: '';
  position: absolute;
  top: 20.833333333333336px;
  left: 20.833333333333336px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 33.333333333333336px;
  height: 33.333333333333336px;
  box-shadow: 0px 0px #fff, 0px 39.58333333333333px #fff, 0px 79.16666666666666px #fff, 0px 118.74999999999999px #fff, 0px 158.33333333333331px #fff, 39.58333333333333px 0px #fff, 39.58333333333333px 39.58333333333333px .........完整代码请登录后点击上方下载按钮下载查看