<ol class="alternate">
<li style="--accent-color: #f0a821">Bi.cool - 在线编辑、预览 HTML</li>
<li style="--accent-color: #eb7326">HTML 5 - 超文本标记语言</li>
<li style="--accent-color: #bb368f">CSS - Cascading Style Sheets</li>
<li style="--accent-color: #6b4495">JAVASCRIPT - 广泛用于网页开发编程语言</li>
<li style="--accent-color: #229ab5">Github - 开源代码托管平台</li>
</ol>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
body {
background-color: #c4c5c7;
padding: 2rem;
}
ol, ol > li {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol {
width: min(400px, 100% - 2rem);
margin-inline: auto;
list-style: none;
display: grid;
font-family: system-ui, sans-serif;
color: white;
counter-reset: liCount;
}
ol:not(.alternate){
gap: 0.5rem;
}
ol > li {
--number-size: 3rem;
--padding-inline: 2.5rem;
--padding-block: 0.5rem;
margin-block: var(--padding-block);
padding: var(--padding-block) var(--padding-inline);
background-color: var(--accent-color);
display: grid;
grid-template-columns: auto 1fr;
grid-auto-flow: dense;
align-items: center;
gap: calc(1rem + var(--padding-block));
border-radius: 100vmax;
box-shadow:
inset 0.15rem 0.15rem hsl(0 0% 0% / .125),
inset 0.5rem 0.5rem 1rem hsl(0 0% 0% / .5),
inset -0.15rem -0.15rem hsl(0 0% 100% / .75);
position: relative;
isolation: isolate;
counter-increment: liCount;
}
ol > li::before {
content: counter(liCount);
font-size: calc(var(--number-size) / 2);
color: var(--accent-color);
width: var(--number-size);
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 100vmax;
background-color: #e6e7e9;
box-shadow:
inset 0.05rem 0.05rem hsl(0 0% 100% / .75),
0.25rem 0.25rem 0.5rem hsl(0 0% 0% / .5),
inset -0.05rem -0.05rem hsl(0 0% 0% / .125);
}
ol > li::after{
content: "";
position: absolute;
z-index: -1;
--size: calc(var(--number-size) + var(--padding-block) * 4);
width: var(--size);
aspect-ratio: 1;
inset-block-start: calc(var(--padding-block) * -1);
--inset-inline: calc(var(--padding-inline) - var(--padding-block) * 2);
inset-inline: var(--inset-inline) auto;
border-radius: 100vmax;
background-color: hsl(0 0% 100% / .125);
background-image:
radial-gradient(circle at calc(50% + 1px) calc(50% + 1px), transparent 67.7%, hsl(0 0% 100% / .5) calc(67.7% + 1px)),
radial-gradient(circle at top left, hsl(0 0% 100% / .1) 50%, transparent calc(50% + 1px));
--backdrop-filter: blur(2px);
-webkit-backdrop-filter: var(--backdrop-filter);
backdrop-filter: var(--backdrop-filter);
box-shadow: 0.25rem 0.25rem 0.5rem hsl(0 0% 0% / 0.125);
}
ol.alternate > li:nth-child(even),
ol.right > li{
grid-template-columns: 1fr auto;
}
ol.alternate > li:nth-child(even)::before,
ol.right > li::before{
grid-column: 2;
}
ol.alternate > li:nth-child(even)::after,
ol.right > li::after{
inset-inline: auto var(--inset-inline);
}
JS
格式化