css带阴影文字卡片效果代码-html代码-BFW代码库

css带阴影文字卡片效果代码

代码语言：html

代码描述：css带阴影文字卡片效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <style>
  
        @import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap");
        
        *,
        *::before,
        *::after {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        body {
          --color: rgba(30, 30, 30);
          --bgColor: rgb(215, 215, 215);
          min-height: 100vh;
        
          display: grid;
          align-content: center;
          gap: 2rem;
          padding: 2rem;
        
          font-family: "Oxygen", sans-serif;
          color: var(--color);
          background: var(--bgColor);
        }
        
        h1 {
          text-align: center;
        }
        
        ol {
          width: min(60rem, 90%);
          margin-inline: auto;
        
          display: flex;
          flex-wrap: wrap;
          gap: 2rem;
        
          list-style: none;
          counter-reset: cardnr;
          justify-content: center;
        }
        
        li {
          --frontColor: white;
          --width: 10em;
          --inlineP: 0.5rem;
          --borderR: 4rem;
          --arrowW: 2rem;
          --arrowH: 1.5rem;
        
          counter-increment: cardnr;
          width: calc(var(--width) - var(--inlineP) * 2);
          display: grid;
          grid-template:
            "icon" var(--borderR)
            "title"
            "descr" 1fr;
          margin-inline: var(--inlineP);
          margin-bottom: calc(var(--borderR));
          position: relative;
        }
        li .icon,
        li .title,
        li .descr {
          background: var(--frontColor);
          padding-inline: 1rem;
          padding-bottom: 1rem;
        }
        li .icon,
        li .title {
          color: var(--accent-color);
          text-align: center;
          padding-bottom: 0.5rem;
        }
        
        li .title,
        li .descr {
          filter: drop-shadow(0.125rem 0.125rem 0.075rem rgba(0, 0, 0, 0.25));
        }
        li .icon {
          grid-area: icon;
          font-size: 2rem;
          display: grid;
          place-items: center;
          border-radius: var(--borderR) 0 0 0;
          position: relative;
        }
        
        li .title {
          grid-area: title;
          font-size: 1.1rem;
          font-weight: bold;
        }
        
        li .descr {
          grid-area: descr;
          font-size: 0.85rem;
          text-align: center;
        }
        li .descr::before {
          content: "";
          width: var(--arrowW);
          height: var(--arrowH);
          position: absolute;
          right: 1.5rem;
          top: 100%;
          background: inherit;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
        }
        
        li::after {
          content: counter(cardnr, decimal-leading-zero);
          position: absolute;
          z-index: -1;
        
          left: calc(.........完整代码请登录后点击上方下载按钮下载查看