div+css布局实现长阴影效果代码-html代码-BFW代码库

div+css布局实现长阴影效果代码

代码语言：html

代码描述：div+css布局实现长阴影效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
:root {
  font-family: system-ui, sans-serif;
}

body {
  min-height: 100vh;
  margin: 0;
  text-align: center;
  display: grid;
  place-items: center;
  background-image: linear-gradient(to bottom, #f9b4aa, #d874b8, #1e6498);
}

h1 {
  text-transform: uppercase;
  color: #fffefe;
  max-width: 90vw;
  letter-spacing: 0.12em;
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 200;
  opacity: 0.7;
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000, 5px 5px 0 #000, 6px 6px 0 #000, 7px 7px 0 #000, 8px 8px 0 #000, 9px 9px 0 #000, 10px 10px 0 #000, 11px 11px 0 #000, 12px 12px 0 #000, 13px 13px 0 #000, 14px 14px 0 #000, 15px 15px 0 #000, 16px 16px 0 #000, 17px 17px 0 #000, 18px 18px 0 #000, 19px 19px 0 #000, 20px 20px 0 #000, 21px 21px 0 #000, 22px 22px 0 #000, 23px 23px 0 #000, 24px 24px 0 #000, 25px 25px 0 #000, 26px 26px 0 #000, 27px 27px 0 #000, 28px 28px 0 #000, 29px 29px 0 #000, 30px 30px 0 #000, 31px 31px 0 #000, 32px 32px 0 #000, 33px 33px 0 #000, 34px 34px 0 #000, 35px 35px 0 #000, 36px 36px 0 #000, 37px 37px 0 #000, 38px 38px 0 #000, 39px 39px 0 #000, 40px 40px 0 #000, 41px 41px 0 #000, 42px 42px 0 #000, 43px 43px 0 #000, 44px 44px 0 #000, 45px 45px 0 #000, 46px 46px 0 #000, 47px 47px 0 #000, 48px 48px 0 #000, 49px 49px 0 #000, 50px 50px 0 #000, 51px 51px 0 #000, 52px 52px 0 #000, 53px 53px 0 #000, 54px 54px 0 #000, 55px 55px 0 #000, 56px 56px 0 #000, 57px 57px 0 #000, 58px 58px 0 #000, 59px 59px 0 #000, 60px 60px 0 #000, 61px 61px 0 #000, 62px 62px 0 #000, 63px 63px 0 #000, 64px 64px 0 #000, 65px 65px 0 #000, 66px 66px 0 #000, 67px 67px 0 #000, 68px 68px 0 #000, 69px 69px 0 #000, 70px 70px 0 #000, 71px 71px 0 #000, 72px 72px 0 #000, 73px 73px 0 #000, 74px 74px 0 #000, 75px 75px 0 #000, 76px 76px 0 #000, 77px 77px 0 #000, 78px 78px 0 #000, 79px 79px 0 #000, 80px 80px 0 #000, 81px 81px 0 #000, 82px 82px 0 #000, 83px 83px 0 #000, 84px 84px 0 #000, 85px 85px 0 #000, 86px 86px 0 #000, 87px 87px 0 #000, 88px 88px 0 #000, 89px 89px 0 #000, 90px 90px 0 #000, 91px 91px 0 #000, 92px 92px 0 #000, 93px 93px 0 #000, 94px 94px 0 #000, 95px 95px 0 #000, 96px 96px 0 #000, 97px 97px 0 #000, 98px 98px 0 #000, 99px 99px 0 #000, 100px 100px 0 #000, 101px 101px 0 #000, 102px 102px 0 #000, 103px 103px 0 #000, 104px 104px 0 #000, 105px 105px 0 #000, 106px 106px 0 #000, 107px 107px 0 #000, 108px 108px 0 #000, 109px 109px 0 #000, 110px 110px 0 #000, 111px 111px 0 #000, 112px 112px 0 #000, 113px 113px 0 #000, 114px 114px 0 #000, 115px 115px 0 #000, 116px 116px 0 #000, 117px 117px 0 #000, 118px 118px 0 #000, 119px 119px 0 #000, 120px 120px 0 #000, 121px 121px 0 #000, 122px 122px 0 #000, 123px 123px 0 #000, 124px 124px 0 #000, 125px 125px 0 #000, 126px 126px 0 #000, 127px 127px 0 #000, 128px 128px 0 #000, 129px 129px 0 #000, 130px 130px 0 #000, 131px 131px 0 #000, 132px 132px 0 #000, 133px 133px 0 #000, 134px 134px 0 #000, 135px 135px 0 #000, 136px 136px 0 #000, 137px 137px 0 #000, 138px 138px 0 #000, 139px 139px 0 #000, 140px 140px 0 #000, 141px 141px 0 #000, 142px 142px 0 #000, 143px 143px 0 #000, 144px 144px 0 #000, 145px 145px 0 #000, 146px 146px 0 #000, 147px 147px 0 #000, 148px 148px 0 #000, 149px 149px 0 #000, 150px 150px 0 #000, 151px 151px 0 #000, 152px 152px 0 #000, 153px 153px 0 .........完整代码请登录后点击上方下载按钮下载查看