如何给一个div两个不同的图像和颜色边框答案

【问题标题】：how to give one div two different image and color borders如何给一个div两个不同的图像和颜色边框
【发布时间】：2022-12-20 14:57:07
【问题描述】：

我有一个 div，需要同时具有颜色和图像混合边框。顶部边框需要是红色，底部使用 SVG 图像，但左右边框将向左透明。当我使图像边框处于活动状态时，所有 div 都会变成相同的基于图像的边框，而当我使用颜色边框时，所有的 div 都会变成基于颜色的边框。是否有任何 CSS 属性可用于明确哪个边框应该用于基于图像的边框以及哪个边框用于颜色。现在我有底部边框作为图像

div#navigation {

    background-color: #F3F3F3;
    border-bottom: 15px solid #000;
    border-image-repeat: round;
    border-image-slice: 300;
    border-image: url(/sites/default/files/inline-images/Component%203%20%E2%80%93%203.svg) 100% 0 / 2;
    stretch: ;
       border-top: 5px solid #e00021;

}

【问题讨论】：

标签： html css

【解决方案1】：

要给 div 两个不同的图像和颜色边框，您可以使用 border 属性并为每个边框边指定单独的值。

例如，要给顶部边框一个红色，给底部边框一个图像，你可以使用下面的 CSS：

div#navigation {
  background-color: #F3F3F3;
  border-top: 5px solid #e00021;
  border-bottom: 15px solid #000;
  border-image-repeat: round;
  border-image-slice: 300;
  border-image: url(/sites/default/files/inline-images/Component%203%20%E2%80%93%203.svg) 100% 0 / 2;
  border-left: none;
  border-right: none;
}

这将使用指定的图像为 div 提供红色的顶部边框和底部边框，同时使左右边框保持透明。

您还可以使用其他边框属性，例如边框颜色、边框宽度和边框样式，进一步自定义边框的外观。例如，您可以使用 border-style 指定边框的样式（例如，实线、虚线等），并使用 border-width 指定边框的粗细。

【讨论】：