为 4 个边框中的每一个创建一个边框渐变答案

【问题标题】：Create a border gradient for each of the 4 borders为 4 个边框中的每一个创建一个边框渐变
【发布时间】：2015-02-09 20:57:08
【问题描述】：

我想为每个边框创建相同的线性渐变。

5种颜色的边框渐变开始于

transparent to white to black to white to transparent

这样我就有了透明的角落。

如何为所有 4 个边框执行此操作？

是否可以为边框分配线性渐变？

旁注：它应该在 IE9+ 上运行而不需要太多努力，否则 IE10+ ：P

【问题讨论】：

确定我只是上传它。我首先必须在这个愚蠢的虚拟机上安装一个绘图应用程序......

标签： html css less css-shapes

【解决方案1】：

使用径向渐变怎么样？虽然这只是一个模型，但您可以看到基本效果。

.outer {
  vertical-align:top;
  display:inline-block;
  height: 100px;
  width: 100px;
  position: relative;
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 1%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(90%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}
.inner {
  height: 90%;
  width: 90%;
  position: absolute;
  left: 5%;
  top: 5%;
  background: white;
}

<div class="outer">
  <div class="inner">
    text
  </div>
</div>
<div class="outer" style="height:100px; width:200px">
  <div class="inner">
    text
  </div>
</div>

资源

1 * gradient generator

注意

不适合<=IE9的项目

【讨论】：

我必须选择最兼容的是这个！谢谢！
@Pascal：我认为两者都与其他 tbh 一样受支持。但无论如何都给你相同的输出。 :)
实际上他们给出不同的输出，一个是线性的，另一个是径向渐变。让我们说类似的输出......

【解决方案2】：

您也可以使用多个线性渐变作为背景并根据需要定位它们，如下面的 sn-p 所示。

要更改边框的大小/宽度，请修改 background-size 中的 20px 值。（注意：根据所需的输出，您可能还必须在更改大小时更改线性梯度百分比。但这应该是相当直接的。）

background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;

整体上的渐变have no support in IE 9，但应该在 IE 10+ 中工作。另一方面，Border-image 仅适用于 IE 11 以上。

.border-image {
  height: 200px;
  width: 200px;
  background: -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
  background: -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
  background: linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
  background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px;
  padding: 20px;
}

&lt;div class="border-image"&gt;Some Test Content&lt;/div&gt;

【讨论】：