[分享]css3投影怎么写

CSS3中的投影效果可以让文本或元素看上去浮现在背景之上，增加其立体感和深度感。投影效果可以用于字体、按钮、图片甚至是整个页面的背景上。/ 文本投影 / h1 { textshadow: 2px 2p...

CSS3中的投影效果可以让文本或元素看上去浮现在背景之上，增加其立体感和深度感。投影效果可以用于字体、按钮、图片甚至是整个页面的背景上。

/* 文本投影 */
h1 {
  text-shadow: 2px 2px 4px #CCCCCC;
}

/* 元素投影 */
.box {
  box-shadow: 2px 2px 4px #CCCCCC;
}

/* 多重投影 */
.btn {
  box-shadow: 
    0px 2px 1px #CCCCCC, /* 上方投影 */
    0px -2px 1px #CCCCCC, /* 下方投影 */
    2px 0px 1px #CCCCCC, /* 右侧投影 */
    -2px 0px 1px #CCCCCC; /* 左侧投影 */
}

/* 隐式投影 */
.container {
  -webkit-box-shadow: inset 0px 0px 10px #CCCCCC;
          box-shadow: inset 0px 0px 10px #CCCCCC;
} 

text-shadow属性用于添加文本投影，其参数为投影距离、投影模糊半径和颜色。box-shadow属性用于添加元素投影，其参数与text-shadow相同，通常用于添加圆角矩形按钮等元素。多重投影可用于在元素的多个方向上添加投影效果。隐式投影则是在元素内部添加投影效果。

除了text-shadow和box-shadow属性外，CSS3还提供了其他投影效果，如text-stroke等属性。通过使用投影效果，可以让网页元素看上去更加鲜活，增强用户的体验感。