如何使用渐变在 CSS 中制作 "double" 类型的边框？

Question

我知道我可以用 border-image 制作渐变实心边框，但如何让它也适用于双边框？

Answer 1

您可以使用 ::before 或 ::after 伪元素伪造它。见 fiddle

.gradient-box{
    margin: 40px auto;
   width: 150px;
   height: 150px;
   background: #131313;
   border: 10px solid transparent;
   -moz-border-image: -moz-linear-gradient(top, #FC913A 0%, #FF4E50 100%);
   -webkit-border-image: -webkit-linear-gradient(top, #FC913A 0%, #FF4E50 100%);
   border-image: linear-gradient(to bottom, #FC913A 0%, #FF4E50 100%);
   border-image-slice: 1;
 }

div::before {
  content: '';
  display: block;
  position: relative;
  left: -25px;
  top: -25px;
  height: 180px;
  width: 180px;
  border: 10px solid transparent;
   -moz-border-image: -moz-linear-gradient(top, #FC913A 0%, #FF4E50 100%);
   -webkit-border-image: -webkit-linear-gradient(top, #FC913A 0%, #FF4E50 100%);
   border-image: linear-gradient(to bottom, #FC913A 0%, #FF4E50 100%);
   border-image-slice: 1;
}

<div class="gradient-box"></div>

如何使用渐变在 CSS 中制作 "double" 类型的边框？

How can I make a border of type "double" in CSS with gradient?

css

gradient

border