div+css实现排序列表效果代码-html代码-BFW代码库

div+css实现排序列表效果代码

代码语言：html

代码描述：div+css实现排序列表效果代码

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

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

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

  
  
<style>
@layer demo, orderedList;

@layer orderedList{
  ol.circle { --border-radius: 100vmax }
  ol.square { --border-radius: 0 }
  ol {
    --card-color: hsl(0 0% 95%);
    --text-color: hsl(0 0% 5%);
    --border-size: 0.5rem;
    --step-size: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    counter-reset: liCount;
    display: grid;
    gap: calc(var(--border-size) * 2);
    font-family: system-ui, sans-serif;
  }

  ol > li {
    margin: var(--border-size);
    background-color: var(--card-color);
    color: var(--text-color);
    display: grid;
    grid-template-columns: var(--step-size) 1fr;
    grid-auto-flow: dense;
    align-items: center;
    gap: calc(var(--border-size) * 4);
    counter-increment: liCount;
    padding: calc(var(--border-size) * 2);
    position: relative;
    --so: calc(var(--border-size) * .25);
    --bs1: var(--so) var(--so) var(--border-size) hsl(0 0% 0% / .5);
    --bs2: 0 0 0 var(--border-size) var(--accent-color);
    --bs3: var(--so) var(--so) var(--border-size) calc(var(--border-size)) hsl(0 0% 0% / .5);
    box-shadow: var(--bs1);
    border-radius: var(--border-radius, 0)
  }
  ol > li::before {
    content: counter(liCount);
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
    background-color: var(--card-color);
    box-shadow: var(--bs1), var(--bs2), var(--bs3);
    font-size: calc(var(--step-size) * .5);
    border-rad.........完整代码请登录后点击上方下载按钮下载查看