`

css3阴影属性box-shadow

 
阅读更多
css3阴影属性box-shadow的一些注意点:
box-shadow:阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色;
Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2px 5px #333333;
webkit内核的Safari和Chrome支持Box Shadow(阴影):-webkit-box-shadow:2px 2px 5px #333333;
Opera支持Box Shadow(阴影):box-shadow:2px 2px 5px #333333;
IE不支持Box Shadow(阴影);
同一个元素可以使用多个阴影,box-shadow:2px 2px 5px #333333,box-shadow:-2px -8px 5px #333333;;
js中可以使用:obj.style.webkitBoxShadow=值(字符串);obj.style.MozBoxShadow=值(字符串);obj.style.boxShadow=值(字符串);
查看一个box-shadow(阴影)演示:http://www.css88.com/tool/css3Preview/Box-Shadow.html
演示参照:http://westciv.com/tools/index.html
分享到:
评论
1 楼 zhangyaochun 2012-04-03  
IE不支持Box Shadow(阴影);  -----IE9已经支持了

相关推荐

    qt模拟CSS3之box-shadow效果

    由于qss不支持css3的box-shadow效果,故而该工程中,采用类似android九点图的方式,把背景图截为9分,即4角4边一中心,并把4角4边重绘于待修饰的控件的边缘,从而模拟了box-shadow效果。

    CSS3属性box-shadow使用指南

    今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...

    jQuery CSS3 box-shadow属性设置css3阴影

    jQuery CSS3 box-shadow属性设置css3阴影

    详解CSS3阴影 box-shadow的使用和技巧总结

    本文讲诉了CSS3阴影 box-shadow的使用和技巧,具体如下: text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:...

    HTML5 CSS3 gradient、box-shadow按钮特效代码大全.rar

    HTML5 CSS3使用 gradient、box-shadow实现的按钮特效代码大全,带阴影的按钮,个个都很漂亮的CSS3按钮,你借助这些按钮效果,也可进一步学习下gradient、box-shadow的具体用法,对提高CSS3的编程水平有帮助。

    CSS3属性box-shadow使用详细教程

    box-shadow:length ...box-shadow:-3px -3px 6px 0px #666效果如下图: box-shadow:0px 0px 12px 0px #666效果如下图: box-shadow: 0px 0px 10px 5px #666效果如下图: 1. box-shadow属性的浏览器兼容性 先

    IE下模拟css3中的box-shadow(阴影)效果代码

    在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜 基本语法:filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值), Strength=阴影半径(数值));...

    CSS3里box-shadow属性的使用方法示例详解

    比如:box-shadow,每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用,都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用,方便以后查看。 一、box-shadow语法 ...

    CSS阴影效果的比较之drop-Shadow与box-Shadow

    drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法: ....

    CSS3 box-shadow属性实例详解

    1、盒子阴影box-shadow box-shadow属性向box添加一个或多个阴影。 语法: box-shadow: offset-x offset-y blur spread color inset; ox-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影...

    详解CSS3的box-shadow属性制作边框阴影效果的方法

    IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。语法:代码如下: CSS Code复制内容到剪贴板 box-shadow: h-shadow v-shadow blur spread color inset;  h-shadow,v-shadow必须。...

    Photoshop投影与CSS中box-shadow的转换

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-...

    CSS3中box-shadow的用法介绍

    一般我们通过box-shadow来设置盒阴影,但是有些属性我们一般没有用到,这篇文章将对box-shadow属性进行逐个分析。语法 CSS Code复制内容到剪贴板 E {box-shadow:inset x-offset y-offset blur-radius spread-...

    详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

    要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢? 一、兼容性不一 CSS3 box-shadow从...

    CSS伪元素 :before, :after, box-shadow应用

    利用CSS伪元素 :before 和 :after 可以在文档前后插入内容而不改变文档原有结构,再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子: 1、利用 :before 和 :after 添加背景,比如给一段文字前后打引号...

    css3 box-shadow阴影(外阴影与外发光)图示讲解

     外阴影:box-shadow: X轴 Y轴 Rpx color;  属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色  内阴影:box-shadow: X轴 Y轴 Rpx color ...

    tailwindcss-box-shadow:Tailwind CSS插件,可生成没有CSS变量的标准盒形阴影实用程序

    tailwindcss-box-shadow 一个完全生成您在theme配置中定义的shadow实用程序的插件,没有CSS变量。 但为什么? 我需要中的shadow实用程序,它们不依赖Tailwind CSS 2.x中的新CSS变量策略。... boxShadow : false ,

Global site tag (gtag.js) - Google Analytics