当前位置：首页 -> 网页设计 -> HTML/CSS -> CSS滤镜之Shadow属性

CSS滤镜之Shadow属性

时间： 2021-07-31 作者：daque

shadow属性不妨在指定的目标创造物体的投影。它的表白式是如许的：　　filter：shadow（color=color，direction=direction）

　　在这边，shadow有两个参数值：color参数用来指定投影的脸色；direction参数用来指定投影的目标。　　这边说的目标与咱们在第二节blur属性中提到的“目标与观点的联系”是一律的。　　大概您会问，前方讲到的dropshadow属性和shadow属性有什么各别吗？　　光说的话，您害怕还难以领会，让咱们看一看辨别运用这两个属性做出来的功效有什么各别（见下图）：

css滤镜之shadow属性图1

　　　　　　　　　shadow功效　　　　　　　　dropshadow功效

css滤镜之shadow属性图2

　　如许一比较，就不妨很鲜明的看出两者的各别。　　shadow属性不妨在大肆观点举行投射暗影，dropshadow属性本质上是用偏移来设置暗影的。以是，看上去左图的笔墨和暗影就像是一体的，而右图的笔墨就像摆脱了暗影一律。　　本例的代码如次：

<html>　　　<head> 　　　<title> shadow</title> 　　　<style>//*发端树立css款式*// 　　　 　　 </style> 　　 </head> 　　 <body> 　　 <div class=“shadow”>//*地区内为shadow类*// 　　 <p style=“font-family：bailey；font-size：48pt；　　　　　　　　font-weight：bold；color：#ff9900；”> 　　　 hongen online</p>//*设置字体称呼、巨细、粗细、前局面*// 　　　</div> 　　　<div class=“dropshadow”>//*地区内为dropshadow类*// 　　　<p style=“font-family：bailey；font-size：48pt；　　　　　　　　 font-weight：bold；color：#ff9900；”> 　　　 hongen online</p>//*设置字体款式与shadow类的一律*// 　　　</div> 　　　</body> 　　</html>

CSS滤镜之Shadow属性

相关推荐

推荐下载

热门阅览

最新排行