如何使用实线和渐变制作边框？

Question

我正在尝试在包含实线和渐变边框的div周围创建边框。 （不，它不会像我的样本图像那样丑陋，但我认为如果我至少可以显示出类似于我想要实现的东西，那将会有所帮助。）我该怎么做？如果我想要两个或更多相反的渐变作为同一个div的边界，我该怎么做？如果您可以清理我的原始代码，我不会被冒犯。我希望它尽可能干净，兼容和跨浏览器。它将用于移动应用程序，而不是网页，但我确信完成的代码将适用于任何接受CSS代码的内容。感谢您提供的任何帮助。

这是我到目前为止所拥有的。为预期外观提供的样本图像。

border-width: 2px;
border-style: solid;
-webkit-border-image:
    -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%),
    (top, rgba(255,224,122,1) 0%,rgba(153,119,0,1) 15%,rgba(35,35,35,1) 39%,rgba(51,51,51,1) 45%,rgba(51,51,51,1) 58%,rgba(132,117,66,1) 59%,rgba(255,249,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
-moz-border-image:
    -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%),
    (top, rgba(255,224,122,1) 0%, rgba(153,119,0,1) 15%, rgba(35,35,35,1) 39%, rgba(51,51,51,1) 45%, rgba(51,51,51,1) 58%, rgba(132,117,66,1) 59%, rgba(255,249,204,1) 100%); /* FF3.6-15 */
-o-border-image:
    -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%),
    (top, rgba(255,224,122,1) 0%, rgba(153,119,0,1) 15%, rgba(35,35,35,1) 39%, rgba(51,51,51,1) 45%, rgba(51,51,51,1) 58%, rgba(132,117,66,1) 59%, rgba(255,249,204,1) 100%); /* Opera */
border-image:
    linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 100%),
    (to bottom, rgba(255,224,122,1) 0%,rgba(153,119,0,1) 15%,rgba(35,35,35,1) 39%,rgba(51,51,51,1) 45%,rgba(51,51,51,1) 58%,rgba(132,117,66,1) 59%,rgba(255,249,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe07a', endColorstr='#fff9cc',GradientType=0 ); /* IE6-9 */

Answer 1

你可以设置2个不同的背景图像，一个用于内部背景，另一个用于代替边框的背景（注意我们仍然需要定义边框，但设置为透明）。

现在，可以使用box-shadow：inset：

完成实体边框

＆＃13;

＆＃13;

.test {
  width: 200px;
  height: 150px;
  border-radius: 20%;
  border: solid 10px transparent;
  background-image: linear-gradient(tomato, green, yellow), 
                    linear-gradient(to right, yellow, blue, tomato);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: inset 0px 0px 0px 3px black;
}

＆＃13;

<div class="test">
</div>

＆＃13;

＆＃13;

＆＃13;