css阴影

转载 2015年07月07日 16:53:25

标准方法当然就是指使用CSS3的方法了,这个应该不少同行应该知道,参见如下代码:

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
}

释义为:横向偏移3像素,纵向偏移3像素,模糊4像素,颜色为纯黑。

对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢?box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。
好在IE浏览器有个IE shadow滤镜,是IE浏览器私有的一个东西,可以模拟还凑合的盒阴影效果,使用类似于下面的代码:

.shadow {
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

样式综合

如下代码:

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}


CSS之弧形阴影

简述下面我们来讲述如何用CSS来实现一个弧形阴影。简述 阴影 效果 注释 标题 效果 源码 合并 效果 源码阴影效果首先实现一个简单的阴影效果 div { background: green...
  • u011012932
  • u011012932
  • 2016年03月16日 16:44
  • 2938

CSS学习(六)-css圆角边框高级效果、边框阴影效果(上)

一、理论: 1.border-radius: a.表格应用圆角:表格必须使用border-collapse属性为separate,表格圆角才能正常显示 b.圆形:元素的宽度和高度相同,圆角的半径...
  • bwshqh
  • bwshqh
  • 2016年03月04日 01:05
  • 1730

原来CSS可以添加多个阴影

原来CSS可以添加多个阴影看到一个非常好看css效果,如图:查看了一下源码,原来是添加了两个阴影.t-sh{ text-shadow:0 -1px 0 #fff,0 3px 1px rgba(0,...
  • KimBing
  • KimBing
  • 2016年10月16日 15:32
  • 1332

CSS实现带阴影效果的三角形

目标效果用将width和height设置为0,通过border特性来实现三角形的效果的方法,想必很多人都实现过。 但是如果要求三角形边缘具有阴影效果,这样一来以前的实现方式显然是不行,因为box-s...
  • ForeverSober
  • ForeverSober
  • 2017年07月04日 23:02
  • 2154

CSS应用:阴影和轮廓

.t_table { border: 2px solid #ddd; border-radius: 6px; width: 100%; border-spacing: ...
  • liuy_98_1001
  • liuy_98_1001
  • 2016年05月11日 22:24
  • 2190

CSS样式给按钮加阴影

这个功能我们的css是无法实现的,不过现在的css3还是可以的,通过box-shadow这个属性来设置,他的参数有: 阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,...
  • masterShaw
  • masterShaw
  • 2016年03月28日 14:37
  • 3623

【CSS3】 CSS3实现“图片阴影”效果

学习前端有点类似于学习英语,很多东西需要一点点累积,下面讲解CSS3实现图片阴影效果。 1、实验效果 2、原理分析 3、源程序...
  • happyhaojie
  • happyhaojie
  • 2016年02月24日 00:06
  • 786

css3做一个带阴影的button按钮

(一) 效果对比鼠标划上前与后: .but{ border: 0px groove orange; box-shadow: 5px 6px 10px #000; m...
  • leipeng46
  • leipeng46
  • 2014年01月07日 20:20
  • 333

css3文字渐变和阴影、图片边框和边框阴影

文字渐变效果使用background-image+ background-clip + text-fill-color来实现,具体介绍请看点击打开链接 文字阴影使用text-shadow来实现,...
  • dw1067061570
  • dw1067061570
  • 2017年02月08日 17:10
  • 1546

css3 shadow实现的各种漂亮阴影效果

css3 shadow按钮阴影效果Demo代码,很多漂亮的纯CSS3实现图片的各种阴影效果代码,而且按钮的背景色处理的也挺个性,看上去很舒服,阴影的各类也挺多,下阴影、弧线阴影、立体阴影等,相信有一款...
  • life66881
  • life66881
  • 2015年06月08日 14:48
  • 1928
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css阴影
举报原因:
原因补充:

(最多只允许输入30个字)