正文 

当前位置： 首页 > 技术 > java教程

ie6ie7ie8的阴影和渐变填充

author author     2023-03-28     139

关键词： 

  1. See full code working on: http://www.cssplay.co.uk/menus/css3-ie-dropdown.html
  2.  
  3.  
  4. CSS:
  5. ===============
  6. /* ================================================================ 
  7. This copyright notice must be untouched at all times.
  8.  
  9. The original version of this stylesheet and the associated (x)html
  10. is available at http://www.cssplay.co.uk/menus/css3-ie-dropdown.html
  11. Copyright (c) 2005-2010 Stu Nicholls. All rights reserved.
  12. This stylesheet and the associated (x)html may be modified in any 
  13. way to fit your requirements.
  14. =================================================================== */
  15.  
  16. .shadow {float:left; width:650px;}
  17. .color {position:relative; background:#fff; display:block; background:#0bf;
  18. -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  19. -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  20. box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  21. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  22. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  23. }
  24. .menu {padding:0; margin:0; list-style:none; height:35px;}
  25. .menu .subHolder {position:absolute; left:-9999px;}
  26. .menu ul {padding:5px 0; margin:0; list-style:none; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');}
  27. .menu li {float:left;}
  28. .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;}
  29. .menu li:hover {position:relative;}
  30. .menu li a:hover {color:#fff; white-space:nowrap; position:relative; text-decoration:none;}
  31. .menu li:hover > a {color:#fff;}
  32. .menu :hover .subHolder {left:0; top:34px;}
  33.  
  34. .menu .subShadow {float:left;}
  35. .menu .subColor {position:relative; display:block; margin-left:4px; margin-top:5px; height:100%;
  36. -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  37. -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  38. box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  39. }
  40. .menu .col1 {background:#fb1;
  41. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  42. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  43. }
  44. .menu .col2 {background:#8c8;
  45. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  46. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  47. }
  48. .menu .col3 {background:#f31;
  49. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  50. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  51. }
  52. .menu .col4 {background:#79b;
  53. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
  54. background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  55. }
  56.  
  57. .menu ul li {float:none;}
  58. .menu ul li a {white-space:nowrap; line-height:20px; padding:0 30px 0 10px; float:none;}
  59.  
  60. .menu table {border-collapse:collapse; width:0; margin:0 0 -1px 0;}
  61. </style>
  62.  
  63. <!--[if IE]>
  64. <style type="text/css">
  65. .menu ul li {float:left;}
  66.  
  67. .color {left:4px; top:4px;}
  68. .shadow {float:left; display:block; background:#000; margin:-5px -5px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4', MakeShadow='true', ShadowOpacity='0.60');}
  69. .menu {filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');}
  70. .menu ul {height:100%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');}
  71.  
  72. .menu .subShadow {background:#000; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.40');}
  73. .menu li a:visited {color:#ccc;}
  74. .menu li a:visited:hover {color:#fff;}
  75.  
  76. * html .menu .subColor {width:1px;}
  77. * html .menu ul {width:1px;}
  78.  
  79. </style>
  80. <![endif]-->

html5画布canvas坐标轴转换图案填充渐变与阴影(代码片段)

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森٩(‘ω’)و上一篇文章我们了解了一些canvas基本图形绘制下面我们再来看一些相关操作#坐标轴变换我们画布中默认的坐标轴与浏览器坐标轴相同x正半轴朝右y正半轴朝... 查看详情

带有渐变和阴影的 UIView

】带有渐变和阴影的UIView【英文标题】：UIViewwithGradientandshadow【发布时间】：2019-02-0603:35:32【问题描述】：尝试添加渐变，添加圆角并在UIView上添加阴影。我可以让它工作，但渐变的位置不正确。（应该全部换成红色）letgradientL... 查看详情

如何在颤动中显示具有顶部和底部渐变阴影的图像？

】如何在颤动中显示具有顶部和底部渐变阴影的图像？【英文标题】：Howtodisplayimagewithtopandbottomgradientshadowinflutter?【发布时间】：2020-07-1201:39:51【问题描述】：我正在研究颤振以显示具有顶部和底部渐变叠加的图像。图像顶部和... 查看详情

android绘图阴影渐变和位图运算处理(代码片段)

目录一、阴影1.1案例-为文字添加阴影和发光效果二、渐变2.1线性渐变（LinearGradient）2.1.1案例-实现圆角矩形环形渐变2.2径向渐变（RadialGradient）2.2.1案例-使用径向渐变绘制棋盘的棋子2.3扫描渐变（SweepGradientÿ... 查看详情

带有渐变、圆角、边框和阴影的 UIButton

】带有渐变、圆角、边框和阴影的UIButton【英文标题】：UIButtonw/gradient,roundedcorners,border,anddropshadow【发布时间】：2011-05-1121:54:30【问题描述】：网站上有一些类似的问题，但我正在寻找一些具体且略有不同的问题。我遵循这里给... 查看详情

用css3实现带有阴影效果和颜色渐变的按钮

...3里的两个新属性box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)：      首先... 查看详情

渐变的圆环

...白色，添加云彩渲染，然后剪贴蒙版5、图层样式，添加阴影   查看详情

对 CAShapeLayer 应用渐变

...充（实际上是一个动画渐变）。与CAShapeLayer相关的一切（阴影、形状、笔触颜色、可动画的形状路径）都很棒。我尝试在 查看详情

android圆角边框阴影边框怎么设置

参考技术A所谓添加阴影，就是两个画布从重叠，上方的画布小于下方的画布，阴影颜色为下方的画布的颜色。item中shape的属性（rectangle:矩形；line：线性；oval：椭圆；ring：环形），默认为矩形corners//设置圆角幅度，必须是在shap... 查看详情

canvas绘制图形

...您必须使用脚本来绘制图形。方法属性　　颜色、样式和阴影属性描述fillStyle设置或返回用于填充绘画的颜色、渐变或模式。strokeStyle设置或返回用于笔触的颜色、渐变或模式。shadowColor设置或返回用于阴影的颜色 查看详情

如何为带有阴影、填充和圆角的 tableview 部分设置样式？

】如何为带有阴影、填充和圆角的tableview部分设置样式？【英文标题】：Howtostyletableviewsectionswithshadow,paddingandroundedcorners?【发布时间】：2019-11-1120:33:40【问题描述】：我想在Swift中从屏幕截图重建应用程序。我想使用具有不同表... 查看详情

如何给svg填充和描边应用线性渐变

...习SVG填充和描边的相关内容）。你可以使用纯色、图案或渐变。前面两种方法我们之前已经讲过了，现在我们来讨论第三种方法——渐变。SVG提供了两种渐变——线性、径向。我今天先讲线性渐变，下篇我们再看看... 查看详情

状态栏和导航栏上的 Google Now 渐变/阴影

】状态栏和导航栏上的GoogleNow渐变/阴影【英文标题】：GoogleNowgradient/shadowonstatusbar&navigationbar【发布时间】：2017-04-1901:05:12【问题描述】：我正在尝试制作与GoogleNow类似的状态栏和导航栏渐变。图片参考：矩形区域如下图所示... 查看详情

qt绘图渐变填充

参考技术AQGradient可以和QBrush组合使用，来指定渐变填充。Qt目前支持三种类型的渐变填充：1、QLinearGradient：显示从起点到终点的渐变2、QRadialGradient：以圆心为中心显示渐变3、QConicalGradient：围绕一个中心点显示渐变渐变类型可... 查看详情

进度部分上的 Seekbar 外阴影

】进度部分上的Seekbar外阴影【英文标题】：Seekbaroutershadowonprogresspart【发布时间】：2017-05-1012:07:45【问题描述】：我在Android中自定义了一个搜索栏，试图只获取填充部分的内部和外部阴影（底部）。我想要这样的结果：此刻，... 查看详情

css纯css按钮，圆角，渐变和阴影(代码片段)

查看详情

css3渐变阴影遮罩

...个容器。渐变平铺repeating-渐变属性了解一下给盒子添加阴影表现效果，仿佛有光打到盒子上和原盒子一样大小，包含borderbox-shadow:h-shadowv-shadowblurspreadcoloroutset定义文字的阴影类似于box-shadow;不支持缩放和内外阴影，可叠加逗号分... 查看详情

qt之图形（渐变填充）(代码片段)

简述QGradient可以和QBrush组合使用，来指定渐变填充。Qt目前支持三种类型的渐变填充：QLinearGradient：显示从起点到终点的渐变QRadialGradient：以圆心为中心显示渐变QConicalGradient：围绕一个中心点显示渐变渐变类型可以使用type()函数... 查看详情