用 CSS 淡出边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16289199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade out a border with CSS
提问by totallyuneekname
I have a footer that has a dashed top border like so:
我有一个带有虚线顶部边框的页脚，如下所示：
footer
{
border-top:1px dashed #ddd;
color:#999;
}
I was wondering how I would be able to make the dashed line fade out from left to right. Thanks!
我想知道如何使虚线从左到右淡出。谢谢！
回答by Explosion Pills
There may be a simpler solution, but one is to put a gradient that fades from left to right that covers the border, e.g.
可能有一个更简单的解决方案，但一个是放置一个从左到右渐变的渐变覆盖边界，例如
footer:before {
content: "";
background-color: black;
height: 1px;
display: block;
top: -1px;
position: relative;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
回答by Starx
You can create this using CSS Gradients. Check here.
您可以使用 CSS Gradients 来创建它。检查这里。
To make it as simple as possible, start off by creating two divs:
为了尽可能简单，首先创建两个 div：
<div id="borderbox">
<div id="box">
</div>
</div>
We will use the outer box and give it a Gradient Background and then give a white background to the inner div, thus faking the border.
我们将使用外部框并为其提供渐变背景，然后为内部 div 提供白色背景，从而伪造边框。
#borderbox {
background-color: #eee; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(to right, #000, #fff); /* For Chrome and Safari */
background-image: -moz-linear-gradient(to right, #000, #fff); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(to right, #000, #fff); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(to right, #000, #fff); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to right, #000, #fff); /* Standard syntax; must be last */
width: 500px;
height: 200px;
display: block;
padding: 1px 0 0 0;
opacity: 0.5;
border-top: 1px dashed #ccc;
}
#box { background: #fff; width: 500px; height: 200px; margin-top: -1px; }
