ol 无序列表，圆形卡片设计，在线预览HTML/Vue

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<h1>OL 圆形卡片设计</h1>
<ol>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M388 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60M124 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60m196-168a31.89 31.89 0 0 0 32-32.1A31.55 31.55 0 0 0 320.2 64a32 32 0 1 0-.2 64"/><path fill="currentColor" d="M367.55 192h-43.76a4 4 0 0 1-3.51-2.08l-31.74-58.17a31 31 0 0 0-49.38-7.75l-69.86 70.4a32.56 32.56 0 0 0-9.3 22.4c0 17.4 12.6 23.6 18.5 27.1c28.5 16.42 48.57 28.43 59.58 35.1a4 4 0 0 1 1.92 3.41v69.12c0 8.61 6.62 16 15.23 16.43A16 16 0 0 0 272 352v-86a16 16 0 0 0-6.66-13l-37-26.61a4 4 0 0 1-.58-6l42-44.79a4 4 0 0 1 6.42.79L298 215.77a16 16 0 0 0 14 8.23h56a16 16 0 0 0 16-16.77c-.42-8.61-7.84-15.23-16.45-15.23"/></svg>  
        </div>
        <div class="title">第1步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M447.68 220.78a16 16 0 0 0-1-3.08l-37.78-88.16C400.19 109.17 379 96 354.89 96H157.11c-24.09 0-45.3 13.17-54 33.54L65.29 217.7A15.7 15.7 0 0 0 64 224v176a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-16h256v16a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V224a16 16 0 0 0-.32-3.22M144 320a32 32 0 1 1 32-32a32 32 0 0 1-32 32m224 0a32 32 0 1 1 32-32a32 32 0 0 1-32 32M104.26 208l28.23-65.85C136.11 133.69 146 128 157.11 128h197.78c11.1 0 21 5.69 24.62 14.15L407.74 208Z"/></svg>  
        </div>
        <div class="title">第2步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M477.64 38.26a4.75 4.75 0 0 0-3.55-3.66c-58.57-14.32-193.9 36.71-267.22 110a317 317 0 0 0-35.63 42.1c-22.61-2-45.22-.33-64.49 8.07C52.38 218.7 36.55 281.14 32.14 308a9.64 9.64 0 0 0 10.55 11.2l87.31-9.63a194 194 0 0 0 1.19 19.7a19.53 19.53 0 0 0 5.7 12L170.7 375a19.6 19.6 0 0 0 12 5.7a194 194 0 0 0 19.59 1.19l-9.58 87.2a9.65 9.65 0 0 0 11.2 10.55c26.81-4.3 89.36-20.13 113.15-74.5c8.4-19.27 10.12-41.77 8.18-64.27a317.7 317.7 0 0 0 42.21-35.64C441 232.05 491.74 99.74 477.64 38.26M294.07 217.93a48 48 0 1 1 67.86 0a47.95 47.95 0 0 1-67.86 0"/><path fill="currentColor" d="M168.4 399.43c-5.48 5.49-14.27 7.63-24.85 9.46c-23.77 4.05-44.76-16.49-40.49-40.52c1.63-9.11 6.45-21.88 9.45-24.88a4.37 4.37 0 0 0-3.65-7.45a60 60 0 0 0-35.13 17.12C50.22 376.69 48 464 48 464s87.36-2.22 110.87-25.75A59.7 59.7 0 0 0 176 403.09c.37-4.18-4.72-6.67-7.6-3.66"/></svg>  
        </div>
        <div class="title">第3步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M407.72 208c-2.72 0-14.44.08-18.67.31l-57.77 1.52L198.06 48h-62.81l74.59 164.61l-97.31 1.44L68.25 160H16.14l20.61 94.18c.15.54.33 1.07.53 1.59a.26.26 0 0 1 0 .15a15 15 0 0 0-.53 1.58L15.86 352h51.78l45.45-55l96.77 2.17L135.24 464h63l133-161.75l57.77 1.54c4.29.23 16 .31 18.66.31c24.35 0 44.27-3.34 59.21-9.94C492.22 283 496 265.46 496 256c0-30.06-33-48-88.28-48m-71.29 87.9"/></svg>  
        </div>
        <div class="title">第4步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M477.77 246.42c-2.13-6-7.23-9.55-12.56-11.95L432 221.38V92a20 20 0 0 0-20-20h-76V40a16 16 0 0 0-16-16H192a16 16 0 0 0-16 16v32h-76a20 20 0 0 0-20 20v129.46l-33.08 13.06c-5.33 2.4-10.58 6-12.72 12s-3.16 11.81-1 19L84.25 415.7h1.06c34.12 0 64-17.41 85.31-43.82c21.32 26.41 51.18 42.12 85.3 42.12s64-15.76 85.31-42.17c21.32 26.41 51.18 43.87 85.3 43.87h1.06l51.25-150.17c2.16-6 1.07-13.1-1.07-19.11M256 152l-144 56.83V108a4 4 0 0 1 4-4h280a4 4 0 0 1 4 4v100.76Z"/><path fill="currentColor" d="M345.22 407c-52.25 36.26-126.35 36.25-178.6 0c0 0-45.64 63-94.64 63l13.33 1c29.86 0 58.65-11.73 85.31-25.59a185.33 185.33 0 0 0 170.6 0c26.66 13.87 55.45 25.6 85.31 25.6l13.33-1C392.21 470 345.22 407 345.22 407"/></svg>  
        </div>
        <div class="title">第5步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" d="M400 64H112a16 16 0 0 0 0 32h288a16 16 0 0 0 0-32"/><path fill="currentColor" d="M424 32H88a24 24 0 0 0-24 24v360a32 32 0 0 0 16 27.71V480h72v-32h208v32h72v-36.29A32 32 0 0 0 448 416V56a24 24 0 0 0-24-24M175.82 371.47a32 32 0 1 1-35.3-35.29a32.09 32.09 0 0 1 35.3 35.29M240 288H96V128h144Zm16-192H96.46L96 64h320l-.46 32zm16 32h144v160H272Zm64.18 236.53a32 32 0 1 1 35.3 35.29a32.09 32.09 0 0 1-35.3-35.29"/></svg>  
        </div>
        <div class="title">第6步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
</ol>
<div class="credits">
</div>

</body>

CSS

格式化

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    --color: rgba(30, 30, 30);
    --bgColor: rgba(245, 245, 245);
    min-height: 100vh;
    display: grid;
    align-content: center;
    gap: 2rem;
    padding: 1rem;
    font-family: "Exo 2", sans-serif;
    color: var(--color);
    background: var(--bgColor);
}

h1 {
    text-align: center
}

ol {
    width: min(60rem, 90%);
    margin-inline: auto;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;

    list-style: none;
    counter-reset: stepnr;
}

li:nth-child(6n + 1) {
    --accent-color: #b8df4e
}

li:nth-child(6n + 2) {
    --accent-color: #4cbccb
}

li:nth-child(6n + 3) {
    --accent-color: #7197d3
}

li:nth-child(6n + 4) {
    --accent-color: #ae78cb
}

li:nth-child(6n + 5) {
    --accent-color: #7dc7a4
}

li:nth-child(6n + 6) {
    --accent-color: #f078c2
}

ol li {
    counter-increment: stepnr;
    width: 18rem;
    --borderS: 2rem;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: calc(var(--borderS) + 2rem);
    position: relative;
}

ol li::before,
ol li::after {
    inset: 0;
    position: absolute;
    border-radius: 50%;
    border: var(--borderS) solid var(--bgColor);
    line-height: 1.1;
}

ol li::before {
    content: counter(stepnr);
    color: var(--accent-color);
    padding-left: 10rem;
    font-size: 12rem;
    font-weight: 700;
    overflow: hidden;
}

ol li::after {
    content: "";
    filter: drop-shadow(-0.25rem 0.25rem 0.0675rem rgba(0, 0, 0, 0.75)) blur(5px);
}

ol li>* {
    width: 7.5rem
}

ol li .icon {
    color: var(--accent-color);
    text-align: center;
}

ol li .icon .i {
    width: 2.3rem;
    height: 2.3rem;
}

ol li .title {
    font-size: 1.9rem;
    font-weight: 500;
}

ol li .descr {
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 300
}

.credits {
    margin-top: 2rem;
    text-align: right
}

.credits a {
    color: var(--color)
}

格式化

//inspired by https://www.freepik.com/premium-vector/vector-infographic-design-template-with-icons-8-options-steps_10571883.htm

预览

控制台