如何在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>