要创建边框颜色渐变而不影响内部内容，您可以使用CSS border-image属性沿着线性渐变。以下是代码的更新版本，其中包含了必要的更改：

<div class="parent background red">
     <div class="box">
        <div class="content">
          Happy coding
        </div>
     </div>
  </div>
  
  <style>
  .parent {
    background: red;
  }
  
  .box {
    position: relative;
    border-image: linear-gradient(to right, #f6b73c, #4d9f0c) 1;
    border-width: 1px;
    border-style: solid;
    border-radius: 15px;
  }
  
  .content {
    background: transparent;
  }
  </style>

在CSS代码中，border-image属性用于定义边框的渐变。线性渐变函数指定渐变的颜色，在本例中，从#f6b73c到#4d9f0c。to right参数可确保水平应用渐变。渐变后的1值指定边框宽度。
通过保持内容背景透明（背景：透明;），渐变只会影响边框，而内部的内容不受影响。

要在不影响内容内部颜色的情况下实现边框颜色渐变，可以使用::before伪元素创建渐变边框效果。

HTML：

<div class="parent">
   <div class="box">
      <div class="content">
         Happy coding
      </div>
   </div>
</div>

CSS：

.parent {
   background: red;
}

.box {
   position: relative;
   border-radius: 15px;
}

.box::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
   border-radius: 15px;
   border: 1px solid;
   border-image: linear-gradient(to right, #f6b73c, #4d9f0c) 1;
}

.content {
   background: transparent;
}

• .parent类保持不变。
• .box类被修改为删除border-image属性，取而代之的是它充当内容和::before伪元素的容器。
• 添加::before伪元素以创建边界渐变效果。它的位置绝对覆盖.box元素的整个区域。
• z-index属性设置为-1，以将::before伪元素放置在.content元素之后。
• border-radius属性同时应用于.box元素和::before伪元素，以保持圆角。
• border特性设置为1 px实体以定义边框样式。
• border-image属性用于从左到右应用颜色为#f6b73c和#4d9f0c的线性渐变。
• .content类保持不变。通过这些更改，.box元素将具有渐变边界，而.content元素内部的内容保持不变。