CSS3之box-shadow--阴影外阴影与外发光

基础语法

外阴影：box-shadow:X Y Npx #color;

内阴影：box-shadow:inset X Y Npx #color;

 

第一个属性：阴影的X轴(可以使用负值)

第二个属性：阴影的Y轴(可以使用负值)

第三个属性：阴影的像素（大小）

第四个属性：阴影的颜色

 

内阴影：inset 这个可以设置内部阴影 具体看示例4

 

注：此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6,span,a等)不是用来设置文字阴影 如果设置文字阴影请参考:text-shadow

示例1

使用样式：box-shadow:0px 0px 8px #f00;因没有使其它X轴与Y轴移动 所在会在本身发生作用 后面的属性我想做前端的应该很明白了

示例2

使用样式：box-shadow:3px 3px 8px #f00;这时候与上面的不同 X轴与Y轴改变了 所以变成了这样‍

示例3

使用样式：box-shadow:-2px 0px 8px #f00,0px -2px 8px #000,0px 2px 8px #9e038a,2px 0px 8px #0f0;也许你看到这样的代码会感觉很乱 但是看到效果图片之后我想你就能立刻懂得这是怎么做的了无非改一下X轴与Y轴与颜色值 还有阴影大小

示例4——内阴影

‍样式使用：box-shadow: inset 0px 0px 30px red;与上面的相同 唯一不同的是添加了一个inset 其它属性与外阴影相同