css3box-shadow阴影（外阴影与外发光）讲解
基础说明：
外阴影：box-shadow: X轴  Y轴  Rpx  color;
属性说明（顺序依次对应）： 阴影的X轴(可以使⽤负值)    阴影的Y轴(可以使⽤负值)    阴影模糊值（⼤⼩）    阴影的颜⾊
内阴影：box-shadow: X轴  Y轴  Rpx  color  inset;
默认是外阴影  内阴影：inset 可以设置成内部阴影
注（PS）：此属性使⽤于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是⽤来设置⽂字阴影  如果设置⽂字阴影请参考知识点:（同理）
因为是新属性，为了兼容各主流浏览器并⽀持这些主浏览器的较低版本，基于主流浏览器上使⽤box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式
box shadow怎么设置欧朋浏览器  -o-box-shadow  IE>9  -ms-box-shadow
基础练习：
为了更好的了解box-shadow的特征，做⼏个⼩测试：(为了⽅便直接在标签内嵌套样式)
测试1： <div ></div>  box-shadow: 0 0 10px #f00  （因没有使其X 轴与Y轴移动 设置值 所在会在本⾝发⽣作⽤  半径范围，颜⾊）
测试2： <div ></div> box-shadow:4px 4px 10px #f00；与测试1不同 X轴与Y轴改变了正值（正值 向右 向下） 所以变成了这样
测试3：<div ></div> box-shadow:-4px -4px 10px #f00；与测试2不同 之处是 X轴与Y轴改变成了负值（负值 向左 向上） 所以变成了这样
同理：你可以测试下⼀正值，⼀负值的效果，这⾥就不做测试了。。。。。。。。
测试4：<div  /*下边阴影*/ ></div>
你看到这样的代码会感觉很乱 但是看到效果图⽚之后你就能明⽩这是怎么做的了⽆⾮改⼀下X轴与Y轴位置与颜⾊值 还有阴影值⼤⼩，（⽤逗号隔开）多练习⼏次就好
测试5：--内阴影  <div ></div> box-shadow: 0px 0px 10px red inset;    与上⾯写法相同 唯⼀不同的是添加了⼀个inset 其它属性与外阴影相同
百变不离其宗，练习就能熟悉，懂了就知道原理，随意改写，在配合css3的动画效果， 闪光层（字）都很简单实现。。希望对你有帮助。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。