code { color: red; background-color: rgb(254, 235, 238); padding: 5px; border-radius: 5px; } pre > code { display: block; color: white; background-color: rgb(96, 96, 96); padding: 5px; border-radius: 5px; } blockquote { margin-right: 0px; background-color: #cfcfcf; } /* by qing */ body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #fffbf0; font-family: system-ui, -apple-system, "Segoe UI", Roboto,sans-serif; padding: 1rem; } .box { width: 90%; } .card { background-color: #eedeb0; border: 1px solid #000000; border-radius: 1.125rem; padding: 1.5rem 1.25rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02); /*max-width: 480px;*/ width: 90%; color: #4d3e2b; transition: box-shadow 0.2s, border-color 0.2s; overflow-wrap: break-word; } .card:hover { border-color: #c7b38a; box-shadow: 0 10px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03); } /* 移动端微调 */ @media (max-width: 480px) { body { padding: 0.8rem; } .card { padding: 1.2rem, 1rem; border-radius: 1rem; border-width: 1px; } } /* 极小屏 (宽度 < 360px) */ @media (max-width: 360px) { .card { padding: 1rem 0.8rem; border-radius: 0.9rem; } }