是否有可能褪色水平渐变成垂直梯度MASK东西

Question

我有三个背景梯度，水平面具，顶部边框和底部边框用于实现这一效果，褪色边境进入的背景：

使用此代码（重复一百万次的浏览器前缀..唉）：

background: 
    linear-gradient(to right, rgba(200,100,40,1) 0%,rgba(250,235,115,0.5) 50%,rgba(200,100,40,1) 100%), 
    linear-gradient(to top, rgba(240,175,30,1) 0%,rgba(240,175,30,0) 2px), 
    linear-gradient(to bottom, rgba(250,235,115,1) 0%,rgba(250,235,115,0) 2px) ; /* W3C */ 

它几乎存在，但我的问题是面罩的边缘是完全不透明（1），但背景ISN”总是坚实的颜色（一些水平内部影子&），导致这些问题。

我目前的解决办法是修改所有我的后台代码，以确保背景不褪色开始，直到它经过上面罩和底部的背景色为底面膜前满。这很麻烦而且不灵活，不是css3的意思。

我已经看到了一些淡出边界的方法（"Fade" borders in CSS），但他们基本上说它应该能够将边框颜色设置为渐变，但我还没有看到它实际上工作并且线程已过时。

这是不带 “面具”：

编辑： SOLUTION：http://jsfiddle.net/turnosaurus/SWVJJ/

Answer 1

发现了一些东西，得到了该解决方案：

-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); 

然而，这删除了阴影效果我也应用到这个元素使用伪：后几乎肯定在浏览器中表现不佳。暗战的时间与这虽然拨弄..

http://www.html5rocks.com/en/tutorials/masking/adobe/

http://thenittygritty.co/css-masking

https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content

http://mir.aculo.us/2012/09/16/masking-html-elements-with-gradient-based-fadeouts/

Answer 2

使用alpha通道。

因此， 父元素必须是实体（NO ALPHA） 子元素必须具有作为淡入淡出的alpha和淡入淡出的实体。

例如， 例如，蓝色10％，红色80％和蓝色10％的页脚，并且由于具有单独的页脚背景，您希望在底部淡入白色。

然后你想要的（注意，这是从我自己的代码复制），

#content {background:#CCCCFF; 
 
background: -webkit-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Safari 5.1 to 6.0 */ 
 
background: -o-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Opera 11.1 to 12.0 */ 
 
background: -moz-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Firefox 3.6 to 15 */ 
 
background: linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* Standard syntax (must be last) */ 
 
color:#000000;margin:0px} 
 
#leftcol {} 
 
#rightcol {} 
 
#centrecol {background-color:#FF8080;padding-top:150px;width:80%;margin-left:10%;margin-right:10%;height:100%;} 
 
#content2footer {background:#CCCCFF; 
 
background: -webkit-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Safari 5.1 to 6.0 */ 
 
background: -o-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Opera 11.1 to 12.0 */ 
 
background: -moz-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Firefox 3.6 to 15 */ 
 
background: linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* Standard syntax (must be last) */ 
 
color:#000000;margin:0px} 
 
#content2footerleft {height:50px;width:10%;margin-top:0px;margin-left:0%;margin-right:90%; 
 
background:#CCCCFF; /* For browsers that do not support gradients */ 
 
background:-webkit-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Safari 5.1 to 6.0 */ 
 
background:-o-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Opera 11.1 to 12.0 */ 
 
background:-moz-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Firefox 3.6 to 15 */ 
 
background:linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* Standard syntax */} 
 
#content2footercentre {height:50px;width:80%;margin-top:-50px;margin-left:10%;margin-right:10%; 
 
background:#FF8080; /* For browsers that do not support gradients */ 
 
background:-webkit-linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* For Safari 5.1 to 6.0 */ 
 
background:-o-linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* For Opera 11.1 to 12.0 */ 
 
background:-moz-linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* For Firefox 3.6 to 15 */ 
 
background:linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* Standard syntax */} 
 
#content2footerright {height:50px;width:10%;margin-top:-50px;margin-left:90%;margin-right:0%; 
 
background:#CCCCFF; /* For browsers that do not support gradients */ 
 
background:-webkit-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Safari 5.1 to 6.0 */ 
 
background:-o-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Opera 11.1 to 12.0 */ 
 
background:-moz-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Firefox 3.6 to 15 */ 
 
background:linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* Standard syntax */} 
 
#footer {margin:5px;color:#808080;font-size:10px}

\t \t <div id="content"> 
 
\t \t \t <div id="leftcol"> 
 
\t \t \t </div> 
 
\t \t \t <div id="rightcol"> 
 
\t \t \t </div> 
 
\t \t \t <div id="centrecol"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div id="content2footer"> 
 
\t \t \t <div id="content2footerleft"> 
 
\t \t \t </div> 
 
\t \t \t <div id="content2footercentre"> 
 
\t \t \t </div> 
 
\t \t \t <div id="content2footerright"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div id="footer"> 
 
    <p>this is the white footer</p> 
 
    </div>

我希望这有助于回答这个问题。 我从这个确切的网页进行研究并重新解释它，并且最初犯了一个错误。在意识到之后，我知道如何解决这个问题，并且这样做，我想我会全面回答这个问题。