具有进度栏样式的框阴影

Question

我正在以此方式开发网站。我正在尝试使用CSS在方框阴影插图中添加进度条（动画）样式。 但这并不完美。

<table>
  <tr>
    <td style="box-shadow: rgb(112, 173, 71) 6px 0px 0px inset;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="box-shadow: rgb(112, 173, 71) 6px 0px 0px inset;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

我正在尝试将这种条形样式用于盒形阴影

Answer 1

考虑背景而不是盒子阴影，然后简单地使用background-size

调整大小

td {
  background:
    repeating-linear-gradient(45deg,green 0 10px,darkgreen 10px 20px) 0 0/100% 100% no-repeat;
}

<table>
  <tr>
    <td style="background-size:80% 100%;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="background-size:20% 100%;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

还有动画：

td {
  position:relative;
  z-index:0;
}
td:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:var(--p);
  background:
    repeating-linear-gradient(45deg,green 0 10px,darkgreen 10px 20px) 0 0/200% 100% no-repeat;
  z-index:-1;
  animation:change 2s linear infinite;
}

@keyframes change {
  to {
    background-position:right;
  }
}

<table>
  <tr>
    <td style="--p:80%;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="--p:20%;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

另一种没有透明度且没有伪元素的动画：

td {
  position:relative;
  z-index:0;
  background:
    linear-gradient(#fff,#fff) right/calc(100% - var(--p)) 100% no-repeat,
    repeating-linear-gradient(45deg,green 0 10px,darkgreen 10px 20px) 0 0/200% 100% no-repeat;
  animation:change 2s linear infinite;
}

@keyframes change {
  to {
    background-position:right;
  }
}

<table>
  <tr>
    <td style="--p:80%;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="--p:20%;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

Answer 2

下面的代码可以帮助您

<table>
  <tr>
    <td style="  
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="box-shadow: 20px 19px 26px rgb(112, 173, 71)  inset;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
<table>