为4个边框中的每一个创建边框渐变 [英] Create a border gradient for each of the 4 borders

问题描述

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

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

 透明到白色到黑色到白色到透明
  

这样我有透明角。

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

p>

Sidenote：它应该运行没有太多的努力IE9 + else IE10 +：P

解决方案

如何使用径向渐变？虽然这只是一个模拟，你可以看到基本的效果。

  .outer {vertical-align：top; display：inline-block; height：100px; width：100px;位置：相对;背景：-moz径向梯度（中心，椭圆覆盖，rgba（0,0,0,1）1％，rgba（0,0,0,1）50％，rgba 0,0）90％，rgba（0,0,0,0）99％，rgba（0,0,0,0）100％）; / * FF3.6 + * /背景：-webkit梯度（径向，中心中心，0px，中心中心，100％，色停（1％，rgba（0,0,0,1））， （50％，rgba（0,0,0,1）），色彩停止（90％，rgba（0,0,0,0）），色彩停止（99％，rgba（0,0,0， 0）），停止色（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）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）90％，rgba（0,0,0,0）99％，rgba（0,0,0,0）100％）; / * IE10 + * / background：radial-gradient（中心椭圆，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 horizo​​ntal gradient * /}。inner {height：90％;宽度：90％; position：absolute;左：5％; top：5％; background：white;}  

 < div class = > < div class =inner> text< / div>< / div>< div class =outerstyle =height：100px; width：200px> < div class =inner> text< / div>< / div>  

---

资源

---

• 1 *渐变发生器

---

请注意

---

• 不适用于< = IE9
的项目

I want to create the same linear gradient for each border.

The border gradient with 5 colors starts from

transparent to white to black to white to transparent

That way I have transparent corners.

How can I do this for all 4 borders?

Is it possible to assign a linear-gradient to a border?

Sidenote: It should run without too much effort on IE9+ else IE10+ :P

解决方案

How about using a radial gradient? Although this is just a mock up, you can see the basic effect.

.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>

---

Resources

---

• 1 * gradient generator

---

Note

---

• Not suitable for projects for <=IE9

这篇关于为4个边框中的每一个创建边框渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！