查看“模板:卡片”的源代码

<div style="    --header-size: 3.5rem;
    --header-card-maxheight: 70vh;
    --width-layout: 1080px;
    --width-layout--extended: calc(var(--width-layout) * 1.5);
    --width-toc: 240px;
    --line-height: 1.6;
    --line-height-xs: 1.25;
    --line-height-sm: 1.375;
    --space-unit: 1rem;
    --space-xxs: calc(0.25 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: var(--space-unit);
    --space-lg: calc(1.25 * var(--space-unit));
    --space-xl: calc(1.5 * var(--space-unit));
    --space-xxl: calc(2 * var(--space-unit));
    --margin-layout: calc((100vw - var(--width-layout)) / 2);
    --padding-page: 16px;
    --color-primary__h: 220;
    --color-primary__s: 60%;
    --color-primary__l: 50%;
    --color-surface-0: hsl(0,0%,100%);
    --color-surface-1: hsl(0,0%,100%);
    --color-surface-2: hsl(210,17%,98%);
    --color-surface-3: hsl(220,17%,93%);
    --color-surface-4: hsl(213,9%,80%);
    --color-primary: hsl(var(--color-primary__h),var(--color-primary__s),var(--color-primary__l));
    --color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 1.2));
    --color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 0.8));
    --background-color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),95%);
    --background-color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),90%);
    --color-surface-2--hover: hsl(210,17%,100%);
    --color-surface-2--active: hsl(210,17%,96%);
    --box-shadow-card: 0 2.8px 2.2px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 6.7px 5.3px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),0 12.5px 10px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 22.3px 17.9px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 41.8px 33.4px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 100px 80px -4px hsl(var(--surface-shadow) / var(--shadow-strength));
    --box-shadow-dialog: 0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength));
    --surface-shadow: var(--color-primary__h) 10% 20%;
    --shadow-strength: 0.02;
    --background-color-overlay: rgba(255,255,255,0.95);
    --background-color-overlay--lighter: rgba(255,255,255,0.6);
    --background-color-icon: rgba(0,0,0,0.6);
    --background-color-icon--hover: rgba(0,0,0,0.8);
    --background-color-icon--active: #000000;
    --background-color-quiet--hover: rgba(0,0,0,0.07000000000000001);
    --background-color-quiet--active: rgba(0,0,0,0.09);
    --background-color-destructive: #fee7e6;
    --background-color-warning: #fef6e7;
    --background-color-success: #d5fdf4;
    --color-base: #54595d;
    --color-base--emphasized: #202122;
    --color-base--subtle: #72777d;
    --color-destructive: #dd3333;
    --color-destructive--hover: #e35b5b;
    --color-destructive--active: #b32424;
    --color-warning: #ffcc33;
    --color-success: #00af89;
    --color-link-new: #dd3333;
    --color-link-new--hover: #e35b5b;
    --color-link-new--active: #b32424;
    --opacity-base--disabled: 0.3;
    --opacity-icon-base: 0.6;
    --opacity-icon-base--hover: 0.8;
    --opacity-icon-base--active: 1;
    --size-icon: 1.25rem;
    --border-color-base: rgba(0,0,0,0.05);
    --border-color-base--lighter: rgba(0,0,0,0.02);
    --border-color-base--darker: rgba(0,0,0,0.08);
    --border-color-input: rgba(0,0,0,0.05);
    --border-color-input--hover: rgba(0,0,0,0.4);
    --border-radius--small: 4px;
    --border-radius--medium: 8px;
    --border-radius--large: 12px;
    --border-radius--pill: 9999px;
    --font-family-base: 'Roboto','Noto Sans CJK',system-ui,-apple-system,sans-serif;
    --font-family-serif: 'Roboto Serif','Noto Serif CJK','Linux Libertine','Georgia','Times','Source Serif Pro',serif;
    --font-family-monospace: 'Roboto Mono','Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace;
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.375rem;
    --font-size-h3: 1.125rem;
    --font-size-h4: 1rem;
    --font-size-h5: 1rem;
    --font-size-h6: 1rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --box-shadow-plist: 0 3px 10px rgb(0 0 0 / 4%),0 -3px 10px rgb(0 0 0 / 4%);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    accent-color: var(--color-primary);
    color: var(--color-base);
    direction: ltr;
    line-height: var(--line-height);
    position: relative;
    padding: 15px;
    background: var(--color-surface-1);
    border-radius: 15px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
    font-size: 0.875rem;
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    justify-content: space-between;
    flex-direction: column;">
<h2 style="font-size: 1rem;font-weight: 800;margin-bottom: 0;">{{{标题}}}</h2>
<p style="    --header-size: 3.5rem;
    --header-card-maxheight: 70vh;
    --width-layout: 1080px;
    --width-layout--extended: calc(var(--width-layout) * 1.5);
    --width-toc: 240px;
    --line-height: 1.6;
    --line-height-xs: 1.25;
    --line-height-sm: 1.375;
    --space-unit: 1rem;
    --space-xxs: calc(0.25 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: var(--space-unit);
    --space-lg: calc(1.25 * var(--space-unit));
    --space-xl: calc(1.5 * var(--space-unit));
    --space-xxl: calc(2 * var(--space-unit));
    --margin-layout: calc((100vw - var(--width-layout)) / 2);
    --padding-page: 16px;
    --color-primary__h: 220;
    --color-primary__s: 60%;
    --color-primary__l: 50%;
    --color-surface-0: hsl(0,0%,100%);
    --color-surface-1: hsl(0,0%,100%);
    --color-surface-2: hsl(210,17%,98%);
    --color-surface-3: hsl(220,17%,93%);
    --color-surface-4: hsl(213,9%,80%);
    --color-primary: hsl(var(--color-primary__h),var(--color-primary__s),var(--color-primary__l));
    --color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 1.2));
    --color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) * 0.8));
    --background-color-primary--hover: hsl(var(--color-primary__h),var(--color-primary__s),95%);
    --background-color-primary--active: hsl(var(--color-primary__h),var(--color-primary__s),90%);
    --color-surface-2--hover: hsl(210,17%,100%);
    --color-surface-2--active: hsl(210,17%,96%);
    --box-shadow-card: 0 2.8px 2.2px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 6.7px 5.3px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),0 12.5px 10px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 22.3px 17.9px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 41.8px 33.4px -4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 100px 80px -4px hsl(var(--surface-shadow) / var(--shadow-strength));
    --box-shadow-dialog: 0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength));
    --surface-shadow: var(--color-primary__h) 10% 20%;
    --shadow-strength: 0.02;
    --background-color-overlay: rgba(255,255,255,0.95);
    --background-color-overlay--lighter: rgba(255,255,255,0.6);
    --background-color-icon: rgba(0,0,0,0.6);
    --background-color-icon--hover: rgba(0,0,0,0.8);
    --background-color-icon--active: #000000;
    --background-color-quiet--hover: rgba(0,0,0,0.07000000000000001);
    --background-color-quiet--active: rgba(0,0,0,0.09);
    --background-color-destructive: #fee7e6;
    --background-color-warning: #fef6e7;
    --background-color-success: #d5fdf4;
    --color-base: #54595d;
    --color-base--emphasized: #202122;
    --color-base--subtle: #72777d;
    --color-destructive: #dd3333;
    --color-destructive--hover: #e35b5b;
    --color-destructive--active: #b32424;
    --color-warning: #ffcc33;
    --color-success: #00af89;
    --color-link-new: #dd3333;
    --color-link-new--hover: #e35b5b;
    --color-link-new--active: #b32424;
    --opacity-base--disabled: 0.3;
    --opacity-icon-base: 0.6;
    --opacity-icon-base--hover: 0.8;
    --opacity-icon-base--active: 1;
    --size-icon: 1.25rem;
    --border-color-base: rgba(0,0,0,0.05);
    --border-color-base--lighter: rgba(0,0,0,0.02);
    --border-color-base--darker: rgba(0,0,0,0.08);
    --border-color-input: rgba(0,0,0,0.05);
    --border-color-input--hover: rgba(0,0,0,0.4);
    --border-radius--small: 4px;
    --border-radius--medium: 8px;
    --border-radius--large: 12px;
    --border-radius--pill: 9999px;
    --font-family-base: 'Roboto','Noto Sans CJK',system-ui,-apple-system,sans-serif;
    --font-family-serif: 'Roboto Serif','Noto Serif CJK','Linux Libertine','Georgia','Times','Source Serif Pro',serif;
    --font-family-monospace: 'Roboto Mono','Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace;
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.375rem;
    --font-size-h3: 1.125rem;
    --font-size-h4: 1rem;
    --font-size-h5: 1rem;
    --font-size-h6: 1rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --box-shadow-plist: 0 3px 10px rgb(0 0 0 / 4%),0 -3px 10px rgb(0 0 0 / 4%);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    accent-color: var(--color-primary);
    direction: ltr;
    line-height: var(--line-height);
    color: var(--color-base--subtle);
    font-size: 0.8125rem;
    letter-spacing: 0.75px;
    margin-top: 5px;
    margin-bottom: 15px;">{{{内容}}}</p>
</div>