diff --git a/resources/panel/card.css b/resources/panel/card.css
index b4b5678..fea7bc9 100644
--- a/resources/panel/card.css
+++ b/resources/panel/card.css
@@ -79,10 +79,8 @@
 .card .basic .char .avatar img {
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-  -o-object-position: top center;
-     object-position: top center;
+  object-fit: cover;
+  object-position: top center;
   position: absolute;
 }
 .card .basic .char .skills {
@@ -371,7 +369,6 @@
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  width: -moz-max-content;
   width: max-content;
 }
 .card .basic .info .weapon_info .info .main .addition {
@@ -542,8 +539,7 @@
 .card .equip-list .box .icon img {
   width: 100%;
   height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
   display: block;
 }
 .card .equip-list .box .info {
@@ -614,6 +610,48 @@
   color: rgb(255, 255, 255);
   font-size: 1em;
 }
+.card .damage-title {
+  padding-top: 1.2em;
+}
+.card .damagelist {
+  margin: 0 2em;
+  margin-top: 1em;
+  text-align: center;
+  display: grid;
+  backdrop-filter: blur(0.2em);
+  border-radius: 0.5em;
+  overflow: hidden;
+  box-shadow: 0 0 3em rgba(0, 0, 0, 0.6);
+  border: 0.1em solid rgba(255, 255, 255, 0.2);
+}
+.card .damagelist .dmg-tr {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
+}
+.card .damagelist .dmg-tr:first-child {
+  border-top: 0.2em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
+  font-size: 1.1em;
+  background: rgba(0, 0, 0, 0.2);
+  text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.6);
+}
+.card .damagelist .dmg-tr:first-child .dmg-td {
+  text-align: center !important;
+  background: none !important;
+}
+.card .damagelist .dmg-td {
+  padding: 0.5em 0.5em;
+  font-size: 0.9em;
+  border-right: 0.1em solid rgba(255, 255, 255, 0.2);
+}
+.card .damagelist .dmg-td:first-child {
+  text-align: left;
+  background: rgba(0, 0, 0, 0.2);
+}
+.card .damagelist .dmg-td:last-child {
+  border-right: none;
+}
 
 .copyright {
   margin-top: -3.3em;
@@ -621,29 +659,4 @@
   z-index: 5;
 }
 
-.damage-title {
-  padding-top: 1.2em;
-}
-
-.damagelist {
-  margin-left: 2em;
-}
-.damagelist th {
-  text-align: center;
-  padding: 0.3em 0.3em;
-  width: 9em;
-}
-.damagelist th:first-child {
-  text-align: left;
-  padding-left: 4em;
-  width: 14em;
-}
-.damagelist td {
-  text-align: center;
-  padding: 0.3em 0.3em;
-  width: 9em;
-}
-.damagelist td:first-child {
-  width: 14em;
-  text-align: left;
-}/*# sourceMappingURL=card.css.map */
\ No newline at end of file
+/*# sourceMappingURL=card.css.map */
diff --git a/resources/panel/card.html b/resources/panel/card.html
index ce55c24..75b6efe 100644
--- a/resources/panel/card.html
+++ b/resources/panel/card.html
@@ -182,22 +182,18 @@
       <% include(sys.specialTitle, {en: 'DAMAGE' , cn: '伤害统计' }) %>
     </div>
     <table class="damagelist">
-      <thead>
-        <tr>
-          <th>类型</th>
-          <th>暴击伤害</th>
-          <th>期望伤害</th>
-        </tr>
-      </thead>
-      <tbody>
-        {{each charData.damages damage}}
-        <tr>
-          <td>{{damage.title}}</td>
-          <td>{{damage.value.cd.toFixed(0)}}</td>
-          <td>{{damage.value.qw.toFixed(0)}}</td>
-        </tr>
-        {{/each}}
-      </tbody>
+      <div class="dmg-tr titlebar">
+        <div class="dmg-td">类型</div>
+        <div class="dmg-td">暴击伤害</div>
+        <div class="dmg-td">期望伤害</div>
+      </div>
+      {{each charData.damages damage}}
+      <div class="dmg-tr">
+        <div class="dmg-td">{{damage.title}}</div>
+        <div class="dmg-td">{{damage.value.cd.toFixed(0)}}</div>
+        <div class="dmg-td">{{damage.value.qw.toFixed(0)}}</div>
+      </div>
+      {{/each}}
     </table>
     {{/if}}
   </div>
diff --git a/resources/panel/card.scss b/resources/panel/card.scss
index 47bc4a8..cd1cbf7 100644
--- a/resources/panel/card.scss
+++ b/resources/panel/card.scss
@@ -291,22 +291,26 @@
 
               .level {
                 $label-width: 0.2em;
-                -webkit-clip-path: polygon($label-width 0%,
-                    calc(100% - $label-width) 0%,
-                    100% $label-width,
-                    100% calc(100% - $label-width),
-                    calc(100% - $label-width) 100%,
-                    $label-width 100%,
-                    0% calc(100% - $label-width),
-                    0% $label-width );
-                clip-path: polygon($label-width 0%,
-                    calc(100% - $label-width) 0%,
-                    100% $label-width,
-                    100% calc(100% - $label-width),
-                    calc(100% - $label-width) 100%,
-                    $label-width 100%,
-                    0% calc(100% - $label-width),
-                    0% $label-width );
+                -webkit-clip-path: polygon(
+                  $label-width 0%,
+                  calc(100% - $label-width) 0%,
+                  100% $label-width,
+                  100% calc(100% - $label-width),
+                  calc(100% - $label-width) 100%,
+                  $label-width 100%,
+                  0% calc(100% - $label-width),
+                  0% $label-width
+                );
+                clip-path: polygon(
+                  $label-width 0%,
+                  calc(100% - $label-width) 0%,
+                  100% $label-width,
+                  100% calc(100% - $label-width),
+                  calc(100% - $label-width) 100%,
+                  $label-width 100%,
+                  0% calc(100% - $label-width),
+                  0% $label-width
+                );
                 padding: 0 0.4em;
                 font-size: 0.9em;
                 display: flex;
@@ -530,6 +534,53 @@
       }
     }
   }
+
+  .damage-title {
+    padding-top: 1.2em;
+  }
+
+  .damagelist {
+    margin: 0 2em;
+    margin-top: 1em;
+    text-align: center;
+    display: grid;
+    backdrop-filter: blur(0.2em);
+    border-radius: 0.5em;
+    overflow: hidden;
+    box-shadow: 0 0 3em rgba(0, 0, 0, 0.6);
+    border: 0.1em solid rgba(255, 255, 255, 0.2);
+
+    .dmg-tr {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      border-bottom: 0.1em solid rgba(255, 255, 255, 0.2);
+
+      &:first-child {
+        border-top: 0.2em solid rgba(255, 255, 255, 0.2);
+        border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
+        font-size: 1.1em;
+        background: rgba(0, 0, 0, 0.2);
+        text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.6);
+        .dmg-td {
+          text-align: center !important;
+          background: none !important;
+        }
+      }
+    }
+
+    .dmg-td {
+      padding: 0.5em 0.5em;
+      font-size: 0.9em;
+      border-right: 0.1em solid rgba(255, 255, 255, 0.2);
+      &:first-child {
+        text-align: left;
+        background: rgba(0, 0, 0, 0.2);
+      }
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
 }
 
 .copyright {
@@ -537,34 +588,3 @@
   position: relative;
   z-index: 5;
 }
-
-.damage-title {
-  padding-top: 1.2em;
-}
-
-.damagelist {
-  margin-left: 2em;
-
-  th {
-    text-align: center;
-    padding: 0.3em 0.3em;
-    width: 9em;
-
-    &:first-child {
-      text-align: left;
-      padding-left: 4em;
-      width: 14em;
-    }
-  }
-
-  td {
-    text-align: center;
-    padding: 0.3em 0.3em;
-    width: 9em;
-
-    &:first-child {
-      width: 14em;
-      text-align: left;
-    }
-  }
-}
\ No newline at end of file