调整了样式和质感（玄学）

src/App.tsx

@@ -236,7 +236,7 @@ function App() {
     <>
       <div className="submit-container">
         <form id="todoForm" onSubmit={handleSubmit}>
-          <h3>用户名称</h3>
+          <div className='form-text'><h3>用户名称</h3></div>
           <input 
             type="text" 
             id="username" 
@@ -245,7 +245,7 @@ function App() {
             onChange={(e) => setUsername(e.target.value)} 
             required
           ></input>
-          <h3>评论内容</h3>
+          <div className='form-text'><h3>评论内容</h3></div>
           <input 
             type="text" 
             id="comment" 
@@ -254,13 +254,12 @@ function App() {
             onChange={(e) => setComment(e.target.value)} 
             required
           ></input>
-          <div>
+          <div className="submit-button">
             <button type="submit">提交</button>
           </div>
         </form>
       </div>
-      <h2>评论列表</h2>
-      <div className="refresh-button">
+      <div className="comment-topbar">
         {comments.length !== 0 && <p>共{commentCount}条评论</p>}
         {comments.length === 0 && <p>暂无评论</p>}
         <button type="button" onClick={fetchComments} disabled={loading}>

src/index.css

@@ -23,7 +23,7 @@ a:hover {
 }
 
 body {
-  background-color: #f7f7f7; 
+  background-color: #f2f2f2; 
   font-family: Arial, sans-serif; 
   padding: 0; 
   margin: 0;
@@ -63,28 +63,30 @@ body {
     form { 
     justify-content: space-between; 
     
-    background-color: #eeeeee;
+    background: linear-gradient(145deg, #f6ffff, #cfd6dc);
     border: 1px solid #ccc;
-    margin-left: 1rem;
-    margin-right: 1rem;
     margin-bottom: 1rem; 
-    padding: 1rem 4rem;
+    padding: 0.5rem 2rem;
+    box-shadow:  14px 14px 20px #dde4ea,
+             -14px -14px 20px #eff8fe;
     } 
      
     input[type="text"] { 
     flex: 1; 
-    padding: 0.5rem; 
+    padding: 0.5rem 4rem; 
     font-size: 1rem; 
     border: 1px solid #ddd; 
     border-radius: 4px; 
     background-color: #fff; 
     color: #111;
+    margin-left: 1rem;
+    margin-right: 1rem;
     } 
      
     button { 
     padding: 0.5rem 1rem; 
     margin-top: 0.5rem; 
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
     border: none; 
     background-color: #10c266; 
     color: #fff; 
@@ -102,11 +104,23 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-.refresh-button { 
+.form-text{
+  display: flex;
+  justify-content: flex-start;
+  margin-left: 1rem;
+}
+
+.submit-button {
+  display: flex;
+  justify-content: flex-end;
+  margin-top : 0.5rem;
+}
+
+.comment-topbar { 
     display: flex; 
     align-items: center; 
     justify-content: space-between;
-    padding: 0; 
+    padding: 0.5rem 2rem; 
 } 
 
 
@@ -124,6 +138,13 @@ button:focus-visible {
   margin-bottom: 2rem;
 } 
 
+.comments-container ul li:hover {
+  border-left: #E00000 5px solid;
+  background: linear-gradient(145deg, #f6ffff, #cfd6dc);
+  box-shadow:  31px 31px 62px #c4cacf,
+             -31px -31px 62px #ffffff;
+}
+
 .comments-container ul li .comment-name { 
   display: flex; 
   align-items: left;  
@@ -132,6 +153,10 @@ button:focus-visible {
   color: #666; 
 } 
 
+.comments-container ul li:hover .comment-name { 
+  border-bottom: 1px solid #BBBBBB;
+}
+
 .comments-container ul li .comment-delete {
   display: flex;
   justify-content: flex-end;