检查这个现场演示
这是代码:
.header_background {
position: relative;
background: #FFF;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwLjUiIHN0b3AtY29sb3I9IiNGRkZGRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNDQ0NDQ0MiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZzEpIiAvPjwvc3ZnPg==);
background-image: -webkit-gradient(linear, center top, center bottom, color-stop(50%, #FFFFFF), color-stop(100%, #CCCCCC));
background-image: -webkit-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%);
background-image: -ms-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%);
background-image: -o-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%);
background-image: linear-gradient(to bottom, #FFFFFF 50%, #CCCCCC 100%);
border: 1px solid #CCC;
padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.header_background:after, .header_background:before {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.header_background:after {
border-color:transparent;
border-right-color: #FFF;
border-width: 5px;
top: 50%;
margin-top: -5px;
}
.header_background:before {
border-color:transparent;
border-right-color:#CCC;
border-width: 6px;
top: 50%;
margin-top: -6px;
}
我已经使用了这个在线渐变制作工具,请使用 css 箭头并稍作修改。
data:image/svg+xml;base64,...etc...
是一个内联 SVG 图像,以 base64 编码。这将在不支持任何纯 CSS3 渐变功能的 IE9 上呈现渐变。
实际上,其他现代浏览器(FF13+、Opera12+)也支持它,但正如Lea Verou 报告的那样,它比纯 CSS3 渐变慢,这就是为什么你仍然需要其他声明的原因。
对于 IE8,您可以使用渐变滤镜:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#eeeeee',GradientType=0 );
这是非常直接的(GradientType=0
意味着垂直,如果你将它更改为1
你将有一个水平渐变)。问题是IE9也支持它!因此,为避免重叠,您需要使用条件注释。
在这种特定情况下,我建议您...不要对 IE8 不屑一顾。它只会显示一个白色背景(这就是我添加background:#FFF;
为第一个声明的原因),这完全没问题。