IE6IE7IE8的阴影和渐变填充
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IE6IE7IE8的阴影和渐变填充相关的知识,希望对你有一定的参考价值。
CSS: =============== /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/css3-ie-dropdown.html Copyright (c) 2005-2010 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .shadow {float:left; width:650px;} .color {position:relative; background:#fff; display:block; background:#0bf; -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7))); background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)); } .menu {padding:0; margin:0; list-style:none; height:35px;} .menu .subHolder {position:absolute; left:-9999px;} .menu ul {padding:5px 0; margin:0; list-style:none; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');} .menu li {float:left;} .menu li a {color:#ccc; line-height:35px; display:block; float:left; padding:0 20px; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;} .menu li:hover {position:relative;} .menu li a:hover {color:#fff; white-space:nowrap; position:relative; text-decoration:none;} .menu li:hover > a {color:#fff;} .menu :hover .subHolder {left:0; top:34px;} .menu .subShadow {float:left;} .menu .subColor {position:relative; display:block; margin-left:4px; margin-top:5px; height:100%; -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); } .menu .col1 {background:#fb1; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7))); background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)); } .menu .col2 {background:#8c8; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7))); background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)); } .menu .col3 {background:#f31; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7))); background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)); } .menu .col4 {background:#79b; background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7))); background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)); } .menu ul li {float:none;} .menu ul li a {white-space:nowrap; line-height:20px; padding:0 30px 0 10px; float:none;} .menu table {border-collapse:collapse; width:0; margin:0 0 -1px 0;} </style> <!--[if IE]> <style type="text/css"> .menu ul li {float:left;} .color {left:4px; top:4px;} .shadow {float:left; display:block; background:#000; margin:-5px -5px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4', MakeShadow='true', ShadowOpacity='0.60');} .menu {filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');} .menu ul {height:100%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');} .menu .subShadow {background:#000; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.40');} .menu li a:visited {color:#ccc;} .menu li a:visited:hover {color:#fff;} * html .menu .subColor {width:1px;} * html .menu ul {width:1px;} </style> <![endif]-->
以上是关于IE6IE7IE8的阴影和渐变填充的主要内容,如果未能解决你的问题,请参考以下文章