我有一个页脚,上面有虚线边框,像这样:
footer
{
border-top:1px dashed #ddd;
color:#999;
}
我想知道如何才能使虚线从左到右逐渐消失。谢谢!
可能有一个更简单的解决方案,但其中一个是添加一个覆盖边框的渐变,从左到右渐变,例如
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%);
}
http://jsfiddle.net/tcs6J/1/你可以使用CSS渐变来创建这个。检查在这里。
为了使其尽可能简单,首先创建两个div:
<div id="borderbox">
<div id="box">
</div>
</div>
我们将使用外部框,并给它一个渐变背景,然后给内部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; }
演示:http://jsfiddle.net/XwJEB/1