CSS中有4个渐变边框

我将不胜感激任何帮助.我正在尝试类似于下图的内容.谢谢.

使用背景图像:(产生精确的输出作为图像)

您似乎每侧都有不同的渐变,因此很难通过该border-image属性实现此目标.您可以尝试使用background-image以下代码段中的行为来模仿行为.

基本上下面的代码片段的作用是它为4个边中的每一个创建渐变作为渐变背景图像条,然后用于background-position将它们放置在正确的位置.

父级上的透明边框是一个占位符,模仿的边框最终会出现.在background-origin: border-box使该元素的背景从启动border-box区本身(而不是padding-box或content-box).这两个只是额外的步骤,以避免使用不必要的calc东西background-position.

.test {
  height: 250px;
  border: 2px solid transparent;
  background-image: linear-gradient(to right, rgb(187, 210, 224), rgb(203, 231, 190)), linear-gradient(to bottom, rgb(114, 191, 87), rgb(116, 191, 86)), linear-gradient(to left, rgb(204, 233, 187), rgb(187, 210, 224)), linear-gradient(to top, rgb(84, 144, 184), rgb(80, 138, 176));
  background-origin: border-box;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
  padding-top: 50px;
}

  This is a box and i want border for all the side