html - 如何在单个TD的边框(仅左侧)上应用多种颜色？就像下面的图片一样

This question already has answers here:

How to create multi-color border with CSS?
                                
                                    （3个答案）
                                
                        
                                2年前关闭。
            
                    
我已经尝试了background-image: linear-gradient(to top, red 50%, green 50%)。

但这涵盖了整个复选框，并从上到下添加了颜色。

我只想在左侧边框上应用。

最佳答案

您可以将伪元素添加到td并设置其background-color，如下所示：

table {
  border-collapse: collapse;
}
td {
  position: relative;
  border: 1px solid #ddd;
  padding: 14px;
}
td:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: -moz-linear-gradient(top, #009eff 50%, #dc3d4c 50%);
  background: -webkit-linear-gradient(top, #009eff 50%,#dc3d4c 50%);
  background: linear-gradient(to bottom, #009eff 50%,#dc3d4c 50%);
}

<table>
  <tr>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
  </tr>
</table>

关于html - 如何在单个TD的边框(仅左侧)上应用多种颜色？就像下面的图片一样，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52397174/