本文主要是介绍CSS3 shadow 属性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、box-shadow 属性
基础说明：外阴影：box-shadow: X轴 Y轴 Rpx color1,X轴 Y轴 Rpx color2,...;
属性说明（顺序依次对应）： 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色内阴影：box-shadow: X轴 Y轴 Rpx color1 inset,X轴 Y轴 Rpx color2 inset,...;
默认是外阴影 内阴影：inset 可以设置成内部阴影注（PS）：此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等)不是用来设置文字阴影
如果设置文字阴影请参考知识点:text-shadow（同理）因为是新属性，为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上使用box-shadow属性时，
我们需要将属性的名称写成-webkit-box-shadow的形式，Firefox浏览器则需要写成-moz-box-shadow的形式，
欧朋浏览器-o-box-shadow，IE>9 -ms-box-shadow 二、text-shadow 属性
text-shadow 曾经在 CSS2 中就出现过，但在 CSS 2.1版本中又被抛弃了，现在 CSS3 版本又重新捡回来了。这说明 text-shadow 这个属性非常值得我们做前端的人员重视，而且 CSS3 这么多属性中，我个人觉得 text-shadow运用得是最多的一个属性，作为我们前端人员我觉得有必要学习并掌握这个 text-shadow 属性。
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*也就是：text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...或者text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...<div class="demo11">text-shadow</div>
<style>
.demo11 {color: #fff;text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);
}
</style>这篇关于CSS3 shadow 属性的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
