html – 为4个边框中的每个边框创建边框渐变

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

5种颜色的边框渐变从

transparent to white to black to white to transparent

那样我就有了透明的角落.

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

是否可以为边界指定线性渐变？

旁注：它应该在没有太多努力的IE9上运行,否则IE10：P

解决方法

如何使用径向渐变？虽然这只是一个模拟,但您可以看到基本效果.

.outer {
  vertical-align:top;
  display:inline-block;
  height: 100px;
  width: 100px;
  position: relative;
background: -moz-radial-gradient(center,ellipse cover,rgba(0,1) 1%,1) 50%,0) 90%,0) 99%,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial,center center,0px,100%,color-stop(1%,1)),color-stop(50%,color-stop(90%,0)),color-stop(99%,color-stop(100%,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,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的项目