.box{ box-shadow: 5px 5px 5px rgba(0,0,0,0.5); }
上述代码中,.box是一个类名,在该类名的样式中定义了box-shadow属性。box-shadow属性的值可以有多个,每个值用空格隔开。第一个值表示投影的水平偏移量,第二个值表示投影的垂直偏移量,第三个值表示投影的模糊程度,最后一个值表示投影的颜色和透明度。
在上述代码中,投影的水平偏移量为5px,垂直偏移量也为5px,模糊程度为5px,颜色为黑色,透明度为0.5。
需要注意的是,box-shadow属性会为元素添加额外的空间,如果不希望投影影响到元素的尺寸和布局,可以使用inset关键字将投影变为内投影。
.box{ box-shadow: inset 5px 5px 5px rgba(0,0,0,0.5); }
上述代码中,加入了inset关键字,表示投影为内投影。
除了box-shadow属性外,CSS还提供了text-shadow属性可以为文本添加投影效果。
.text{ text-shadow: 2px 2px 2px rgba(0,0,0,0.5); }
上述代码中,.text是一个类名,在该类名的样式中定义了text-shadow属性。text-shadow属性的值也可以有多个,每个值用空格隔开。第一个值表示投影的水平偏移量,第二个值表示投影的垂直偏移量,第三个值表示投影的模糊程度,最后一个值表示投影的颜色和透明度。
综上所述,CSS定义投影是一种常用的样式效果,可以通过box-shadow属性和text-shadow属性来实现。