css实现价格套餐卡片效果代码-html代码-BFW代码库

css实现价格套餐卡片效果代码

代码语言：html

代码描述：css实现价格套餐卡片效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap");*,*:after,*:before{box-sizing:border-box}:root{--c-white:#fff;--c-black:#000;--c-ash:#eaeef6;--c-charcoal:#a0a0a0;--c-void:#141b22;--c-fair-pink:#FFEDEC;--c-apricot:#FBC8BE;--c-coffee:#754D42;--c-del-rio:#917072;--c-java:#1FCAC5;--c-titan-white:#f1eeff;--c-cold-purple:#a69fd6;--c-indigo:#6558d3;--c-governor:#4133B7}body{font-family:"Spline Sans",sans-serif;line-height:1.5;min-height:100vh;background-color:var(--c-ash)}.cards{display:flex;flex-wrap:wrap;align-items:flex-start;flex-wrap:wrap;justify-content:center;gap:2.5rem;width:90%;max-width:1000px;margin:10vh auto}.card{border-radius:16px;box-shadow:0 30px 30px -25px rgba(65,51,183,0.25);max-width:300px}.information{background-color:var(--c-white);padding:1.5rem}.information .tag{display:inline-block;background-color:var(--c-titan-white);color:var(--c-indigo);font-weight:600;font-size:.875rem;padding:.5em .75em;line-height:1;border-radius:6px}.information.........完整代码请登录后点击上方下载按钮下载查看