我正在尝试在我的网页底部添加这样的锯齿效果。
我设法找到了一些在所有浏览器中都能很好地工作的代码,除了 Internet Explorer 之外,我得到了以下结果。
不幸的是,避免使用 Internet Explorer 不是一种选择,我对如何解决这个问题的知识有限。
这是我在 CSS 文件中使用的代码。
#footer {
position:relative;
width: 100%;
height: 280px;
margin-top:5px;
background-color: #ab1919 ;
z-index:1;
border-bottom: 10px ridge #ab1919 ;
}
#footer:before {
content: " ";
display:block;
position: relative;
top:0px;left:0px;
width:100%;
height:36px;
background: linear-gradient(#fff 0%, transparent 0%), linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 linear-gradient(45deg, #ab1919 33.33%, #fff 33.33%) 0 0%;
background: -webkit-linear-gradient(#fff 0%, transparent 0%), -webkit-linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 -webkit-linear-gradient(45deg, #ab1919 33.33%, #fff 33.33%) 0 0%;
background: -o-linear-gradient(#fff 0%, transparent 0%), -o-linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 -o-linear-gradient(45deg, #ab1919 33.33%, #fff.33%) 0 0%;
background: -moz-linear-gradient(#fff 0%, transparent 0%), -moz-linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 -moz-linear-gradient(45deg, #ab1919 33.33%, #fff 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
}
如果有人可以帮助解决这个问题,我将永远感激不尽。
谢谢