跳过CSS框模型值定义中的值

Question

TLDR;

我有一个CSS输入表单，每个方向包含4个数字输入，并设置边距。当我提交自动时，自动边距会使元素水平放置在中心位置。当我提供 0px 时，它将其设置为0px，这实际上是＆＃34; 0px＆＃34;的值，并且它不提供类似自动的自动属性。这可能吗？

我想知道是否有这样的东西：例如我有一个像这样的CSS定义：

border-width: 4px;

在某些情况下，我想更改左右边框的宽度：

border-left-width: 2px;
border-right-width: 2px;

而不是写这个，我不能写这些：

border-width: initial 2px;
border-width: inherit 2px;
border-width: unset 2px;

因为它们似乎是chrome开发人员工具中的无效值。

还有什么我可以用来做这个吗？

＆＃13;

＆＃13;

function toggleClasses(){
  document.querySelectorAll(".div").forEach(function(elem){
    elem.classList.toggle("toggled");  
  });
  
}

＆＃13;

.div {
   width: 100px;
   height: 100px; 
   margin: 20px;
   display: inline-block;
   background: #eee;
   border-color: #333;
   border-width: 4px;
   border-style: solid;   
}

.div.div-1.toggled {
   border-width: initial 2px;
   margin: initial 10px;
}

.div.div-2.toggled {
   border-width: inherit 2px;
   margin: inherit 10px;
}

.div.div-3.toggled {
   border-width: unset 2px;
   margin: unset 10px;
}

＆＃13;

<div class="div div-1"></div>
<div class="div div-2"></div>
<div class="div div-3"></div>
<input type="button" onclick="toggleClasses();" value="Togggle" />

＆＃13;

＆＃13;

＆＃13;