怎么样使用CSS样式美化这种展开式选项？

为了美化HTML中的“向下展开式选项”，你可以使用CSS来调整其外观，如字体、颜色、图标、边框等。这里有一些基本的例子：

1. **改变标题样式**：

   summary {
     cursor: pointer; /* 鼠标悬停时指针变化 */
     color: blue;
     font-weight: bold;
   }

   details.open summary { /* 当细节内容已打开时，更改标题样式 */
     text-decoration: line-through; /* 添加删除线效果 */
   }

2. **设置内容区样式**：

   details > p {
     display: none; /* 初始状态隐藏内容 */
   }

   details.open > p {
     display: block; /* 展开时显示内容 */
   }

   /* 可选：添加动画效果 */
   @keyframes fadeIn {
     from {opacity: 0;}
     to {opacity: 1;}
   }

   details.open summary::before {
     content: "▸";
     opacity: 0;
     animation: fadeIn 0.2s ease-in;
   }
   details.open summary::after {
     content: "▾";
     opacity: 0;
     animation: fadeIn 0.2s ease-in;
   }

记住，上述样式可以根据你的需求进行调整。同时，浏览器兼容性也是要考虑的因素，确保给老版本的浏览器也提供相应的样式。