[分享]css3投影区别

CSS3中的投影效果给网页设计带来了更多的可能性，使得页面看起来更加立体、真实、生动。而在CSS3中，投影效果又可以分为两种：boxshadow和textshadow。.box { boxshadow...

CSS3中的投影效果给网页设计带来了更多的可能性，使得页面看起来更加立体、真实、生动。而在CSS3中，投影效果又可以分为两种：box-shadow和text-shadow。

.box {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
} 

box-shadow可以给盒模型和一些元素添加阴影效果。它的语法比较简单，主要包括以下几个参数：

• h-shadow：水平阴影的位置，可以是负值或正值，负值表示阴影在元素左侧，正值表示阴影在元素右侧。
• v-shadow：垂直阴影的位置，可以是负值或正值，负值表示阴影在元素上方，正值表示阴影在元素下方。
• blur：模糊的距离，值越大阴影越模糊，值为0不会产生模糊效果。
• spread：扩展的大小，正值表示阴影扩展的大小，负值表示阴影收缩的大小。
• color：阴影的颜色。

.text {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
} 

text-shadow主要是用于添加文本的阴影效果。它与box-shadow的语法基本一致，但并不支持spread参数。

除了以上两种方式，CSS3还支持inset关键字，它可以让投影效果呈现为内阴影。例如：

.box {
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
} 

以上代码会让元素显示一个内投影效果。

在实际应用中，box-shadow和text-shadow可以相互搭配使用，可以让页面效果更加生动、具有立体感。同时，它们的效果在不同的浏览器中也有所不同，在编写代码时需要做好兼容性处理。