阴影图层阴影

框阴影：阴影类型x水平偏移（正和负值）y垂直偏移（期望的正和负值）阴影大小阴影以扩展阴影颜色值。
可以省略阴影类型，默认值是外部投影。当它的值被插入时，它是一个内部阴影效果。
x水平偏移和y垂直偏移可能是正的和负的，当x的负值投射在左边时，正投影在右边，当y为负值时，投影在其上，正投影在下面。
阴影的大小和延伸与PS.的原则相同。

浏览器的兼容性：
不同浏览器的浏览器兼容性不同，Mozilla内核的浏览器写如下（但是Firefox浏览器的新版本不需要添加）。
-moz盒阴影：阴影X型水平偏移（理想的正负值）Y（垂直偏移理想的正负值）阴影大小的影子将阴影颜色值
Webkit内核的浏览器如下：
WebKit的阴影：阴影框X型水平偏移（理想的正负值）Y（垂直偏移理想的正负值）阴影大小的影子将阴影颜色值

例1：

CSS代码将内容复制到剪贴板。



影子{。
宽度：200px；
身高：50px；
盒子的影子：3px 3px 3px 3px # 000；
/ *万盎司盒阴影：3px 3px 3px 3px # 000； / / Mozilla Firefox火狐浏览器内核，目前的版本已经支持这个属性，所以不需要加个* /
Webkit框阴影：3px 3px 3px 3px # 000；
}




设计素描 uff1a


将框阴影投影类型更改为插入图，效果图：


例二：

CSS代码将内容复制到剪贴板。



影子{。
宽度：200px；
身高：50px；
盒子的影子：0 5px 5px 0红，5px 0 5px 0黄，0 5px 5px 0绿色，5px 5px 0 - 0；
/ *万盎司盒阴影：0 5px 5px 0红5px 0 5px，0黄，0 5px 5px 0绿- 5px 0 5px 0蓝； / / Mozilla Firefox火狐浏览器内核，目前的版本已经支持这个属性，所以不需要加个* /
Webkit框阴影：0 5px 5px 0红，5px 0 5px 0黄，0 5px 5px 0绿色，5px 5px 0 - 0；
}




设计素描 uff1a


文本阴影文本阴影

我们上面讨论的CSS3层框阴影层实现阴影效果，今天我们就来一起学习如何实现阴影效果，将使用另一个属性文字阴影CSS3，两效应增强层和文本纹理，创建三维效果。

Grammar：

xml代码将内容复制到剪贴板。


文字阴影：没有| | { }或{没有任何| } *，*，




文本阴影上的位移：x轴（正反两个方向），y轴上的位移（正反两个方向），阴影的宽度，阴影的颜色值。

解释uff1a
类似于层的影子，它也可以将一组或多组阴影影响到同一个对象，用逗号分隔。X轴偏移可以正面和负面的，当X是转移到在正确的时间正确的，和左移为负时，Y轴偏移可以正面和负面的，当X是向下移位，这是消极的时间偏移。阴影的颜色值可以# XXX，RGB，RGBA颜色和透明。

示例：文本阴影

xml代码将内容复制到剪贴板。


雨下的浮萍




显示效果如下：


对比箱的影子

xml代码将内容复制到剪贴板。


关注Web前端开发




结果如下：


结果如下：