CSS3中过滤器:下拉阴影滤镜与不必区别有哪些 - 行业资讯

　　介绍

这篇文章主要为大家展示了CSS3中过滤器:下拉阴影滤镜与不必区别有哪些,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“CSS3中过滤器:下拉阴影滤镜与不必区别有哪些”这篇文章吧。

<强>一、兼容性不一

CSS3 <代码>不必>

而<代码> 中过滤的<代码>下拉阴影>

<强>二,同样的参数值,表现效果有差异

<代码> 中过滤的<代码>下拉阴影> 过滤器:,下拉阴影(x偏移,,y偏移,,模糊大小,,色值); 　　　　过滤器:下拉阴影(5 px 5 px 10 px 黑色)

表示右下5像素偏移,10像素模糊的黑色阴影。眼见为实,看下面的图片示意。

但是,如果使用同样参数值的<代码>不必> 不必:,5 px 5 px 10 px 黑色;

会发现,<代码>不必>

<强>三,下拉阴影没有内阴影效果

<代码>不必支持插图<代码> 内阴影,如:

不必:,inset 5 px 5 px 10 px 黑色;

但是,<代码>下拉阴影>

<强>四、阴影vs盒阴影

<代码>下拉阴影> 下拉阴影> 不必>

什么意思呢?

下面我们用CSS <代码>边界> ,边界:,10 px dashed # fa608d; 　　,,,身高:,50 px; 　　,,,宽度:,50 px;

CSS3中过滤器:下拉阴影滤镜与不必区别有哪些

然后,我们分别应用<代码>不必和<代码>下拉阴影> 不必:,5 px 5 px 10 px 黑色; 　　,过滤器:下拉阴影(5 px 5 px 10 px 黑),

不必:

CSS3中过滤器:下拉阴影滤镜与不必区别有哪些

过滤器:下拉阴影:

CSS3中过滤器:下拉阴影滤镜与不必区别有哪些

<代码>不必顾名思意”盒阴影”,只是盒子的阴影,你想啊,这盒子中间明明是透明的,结果,阴影的时候,居然光线没有穿透;但是<代码>下拉阴影>

<代码>下拉阴影>

CSS3中过滤器:下拉阴影滤镜与不必区别有哪些

<强>六、下拉阴影的实际应用

我们实现带有箭头指向的浮层面板的时候,考虑到兼容性,三角基本上都是使用<代码> 边界绘制的,没法<代码>不必>

箭头没有阴影,蒙混过关。现在,有了<代码>下拉阴影> CSS代码: 　　.box { 　　,,,保证金:,40 px;,填充:,50 px; 　　background - color,,,,, # fff; 　　,,,位置:,相对; 　　,,,字体大小:,24 px; 　　} 　　.cor { 　　,,,位置:,绝对; 　　,,,左:,-40 px; 　　,,,widtd:, 0;,高度:,0; 　　,,,溢出:,隐藏; 　　边境:,,,,20 px solid 透明; 　　,,,border-right-color:, # fff; 　　} 　　.box-shadow { 　　,,,不必:,5 px 5 px 10 px 黑色; 　　} 　　.drop-shadow { 　　,,,过滤器:,下拉阴影(5 px 5 px 10 px 黑色); 　　} 　　HTML代码: 　　& lt; div 类=癰ox box-shadow"比; 　　,,,& lt;小姐:类=癱or"祝辞& lt;/i> 　　,,不必　　& lt;/div> 　　& lt; div 类=癰ox drop-shadow"比; 　　,,,& lt;小姐:类=癱or"祝辞& lt;/i> 　　,,,过滤器:下拉阴影　　& lt;/div>