基础说明：

外阴影：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等) 不是用来设置文字阴影如果设置文字阴影请参考知识点:text-shadow（同理）

因为是新属性，为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式

欧朋浏览器 -o-box-shadow IE>9 -ms-box-shadow

基础练习：

为了更好的了解box-shadow的特征，做几个小测试：(为了方便直接在标签内嵌套样式)

测试1： <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div> box-shadow: 0 0 10px #f00 （因没有使其X轴与Y轴移动设置值所在会在本身发生作用半径范围，颜色）

测试2： <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;与测试1不同 X轴与Y轴改变了正值（正值向右向下）所以变成了这样‍

测试3：<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;与测试2不同之处是 X轴与Y轴改变成了负值（负值向左向上）所以变成了这样‍

同理：你可以测试下一正值，一负值的效果，这里就不做测试了。。。。。。。。

测试4：<div style="box-shadow:-10px 0px 10px red,   /*左边阴影*/
                                             0px -10px 10px #000, /*上边阴影*/
                                                   10px 0px 10px green,  /*右边阴影*/
                                                   0px 10px 10px blue;" /*下边阴影*/ ></div>

你看到这样的代码会感觉很乱但是看到效果图片之后你就能明白这是怎么做的了无非改一下X轴与Y轴位置与颜色值还有阴影值大小，（用逗号隔开）多练习几次就好

测试5：--内阴影 <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 与上面写法相同唯一不同的是添加了一个inset 其它属性与外阴影相同

百变不离其宗，练习就能熟悉，懂了就知道原理,随意改写，在配合css3的动画效果，闪光层（字）都很简单实现。。希望对你有帮助。。

css3 box-shadow阴影(内外阴影与发光)讲解相关推荐

Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
如何用css的background写一个带斜切角、有边框又有内外阴影的按钮呢？
先附上另一大佬的链接https://segmentfault.com/a/1190000038911131,本文在该基础上做些调整,并详细讲讲background的用法从ui拿到的需求是这样的,这张 ...
shadow acne（阴影失真）和peter panning（阴影悬浮）
原文链接:https://blog.csdn.net/lawest/article/details/106364935 总结下来就是: 因为深度贴图的分辨率有限,导致多个像素点采样1个深度,导致阴影失 ...
关于阴影映射的那些事，shadow acne（阴影失真）和peter panning（阴影悬浮）
在之前学习阴影映射时看的是这篇文章https://learnopengl-cn.github.io/05 Advanced Lighting/03 Shadows/01 Shadow Mapping/ ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

css3 box-shadow阴影(内外阴影与发光)讲解

基础说明：

基础练习：

css3 box-shadow阴影(内外阴影与发光)讲解相关推荐

最新文章

热门文章