div+css实现三维立体字母阴影效果代码-html代码-BFW代码库

div+css实现三维立体字母阴影效果代码

代码语言：html

代码描述：div+css实现三维立体字母阴影效果代码

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

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

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

  
  
  
<style>
h2 {
  --s: .4em; /* space between boxes*/
  --d: .2em; /* the depth */
  --p: .3em; /* the inline padding */
  
  font-family: monospace; /* only for monospace font */
  font-size: 2.8rem;
  line-height: 1.5; /* control the height of the boxes */
  color: #fff;
  letter-spacing: calc(var(--s) + var(--d) + 2*var(--p));
  padding-left: var(--p);
  padding-bottom: var(--d);
  clip-path: inset(0 calc(var(--p) + var(--s)) 0 0);
  --_g:calc(1ch + var(--s) + var(--d) + 2*var(--p));
  background:
    conic-gradient(at calc(100% - var(--d) - var(--s)) calc(100% - var(--d)),
                    #0008 37.5%,#0004 75%,#0000 0) 0 0/var(--_g) 100%
    #8A9B0F; /* the main color */
  -webkit-mask:
    conic-gradient(from -45deg at calc(100% - var(--s)) var(--d),#0000 62.5%,#000 0)
     0 0/var(--_g) 50% repeat-x,
    conic-gradient(at var(--s) calc(100% - var(--d)),#000 37.5%,#0000 0)
     calc(-1*var(--s)) 100%/var(--_g) 50% repeat-x;
}
h2.alt {
  paddi.........完整代码请登录后点击上方下载按钮下载查看