源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 350|回复: 24

[CSS] filter:drop-shadow有方向的阴影使用说明

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2012-12-12 17:05:34 | 显示全部楼层 |阅读模式
前些天在做一个项目的时候,用到了阴影,阴影是个方向都有的,今天看到bricss说到filter:drop-shadow顿时豁然开朗,现整理了,需要的朋友可以参考下 前些天在做一个项目的时候,用到了阴影,阴影是个方向都有的,于是写了一大坨box-shadow来实现,然后今天看到bricss说到filter:drop-shadow,豁然开朗。
具体的实现不用不细讲了,直接看代码:
box-shadow方案

复制代码代码如下:
.box-shadow {
box-shadow: rgba(0,0,0,.5) 0 1px 5px;
}

drop-shadow滤镜方案

复制代码代码如下:
.filter-drop-shadow {
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
}

效果对比:
 
关于drop-shadow这个滤镜

不了解filter的同学请访问:-webkit-filter是神马?
chrome从21版本开始支持(现在主流版本是22),Safari 6和ios 6中Safari也都支持
firefox、Opera、ie继续用box-shadow吧
filter规范现在由webkit和adobe在推,firefox在跟进,ie10也支持一点点了,所以在webkit上,可以实现更好的效果,为什么不用呢?
回复

使用道具 举报

0

主题

1万

回帖

68

积分

注册会员

Rank: 2

积分
68
发表于 2022-8-15 09:06:38 | 显示全部楼层
先把创新班才能下班才能下班
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2022-8-17 09:56:34 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2022-9-1 23:31:38 | 显示全部楼层
啊啊啊啊啊啊啊啊啊啊啊啊啊啊
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2023-3-30 15:26:26 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2023-4-4 23:28:32 | 显示全部楼层
儿飞飞微风DVD谁vdsvd
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

163

积分

注册会员

Rank: 2

积分
163
发表于 2023-7-1 20:00:47 | 显示全部楼层
建军节建军节建军节建军节
TS人妖演出表演服务q3268336102电话13168842816
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-4 00:54:03 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-17 04:16:52 | 显示全部楼层
哟哟哟哟哟以偶
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

221

积分

中级会员

Rank: 3Rank: 3

积分
221
发表于 2023-10-25 20:16:54 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-12-4 03:57 , Processed in 0.067446 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表