阴影图层阴影
框阴影:阴影
类型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前端开发
结果如下:
结果如下: