优雅的CSS艺术

一、文字之美

/* 如诗的排版韵律 */
p {
  font-family: "思源宋体", serif;  /* 笔墨书香 */
  line-height: 1.8;                /* 行云流水 */
  text-align: justify;             /* 方寸有度 */
  color: #333;                     /* 墨色晕染 */
  text-indent: 2em;                /* 起承转合 */
}

二、空间之韵

/* 留白的艺术哲学 */
.container {
  max-width: 800px;                /* 器量有度 */
  margin: 0 auto;                  /* 中正平和 */
  padding: 2rem 3rem;              /* 虚实相生 */
  box-shadow: 0 0 30px rgba(0,0,0,0.1); /* 光影婆娑 */
}

三、色彩之道

/* 色彩的视觉诗篇 */
:root {
  --竹青: #789F6B;                /* 林间新绿 */
  --霁蓝: #4A6FA5;                /* 雨后晴空 */
  --胭脂: #C3272B;                /* 朱砂点绛 */
}

.header {
  background: linear-gradient(135deg, var(--竹青), var(--霁蓝));
  color: white;                    /* 素裹银妆 */
}

四、动效之趣

/* 灵动的交互语言 */
.button {
  transition: all 0.3s ease;       /* 行云流水 */
  transform: scale(1);             /* 蓄势待发 */
}

.button:hover {
  transform: scale(1.05);          /* 翩若惊鸿 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 浮光跃金 */
}

五、响应之智

/* 自适应的智慧 */
@media (max-width: 768px) {
  body {
    font-size: 0.9rem;             /* 随方就圆 */
    padding: 1rem;                 /* 量体裁衣 */
  }

  .sidebar {
    display: none;                 /* 大象无形 */
  }
}

注：好的CSS如同水墨丹青，讲究"疏可走马，密不透风"。在代码的方寸之间，展现设计的万千气象。