详解CSS3的图层阴影和文字阴影效果使用

时间:2021-05-08

box-shadow图层阴影

box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
阴影类型可以省略,默认为外投影,当它的值为inset时,为内阴影效果。
X水平偏移和Y垂直偏移可取正负值,当X为负值是投影在左边,为正时投影在右边。当Y为负值时投影在上面,为正时投影在下面。
阴影大小和扩展与ps里面的原理一样。

浏览器兼容性:
不同的浏览器兼容性不同,mozilla内核的浏览器写法如下(但新版本的火狐浏览器已经不需要再添加):
-moz-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
webkit内核的浏览器写法如下:
-webkit-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值

实例一:

CSS Code复制内容到剪贴板
  • <divclass="shadow"></div>
  • .shadow{
  • width:200px;
  • height:50px;
  • box-shadow:3px3px3px3px#000;
  • -webkit-box-shadow:3px3px3px3px#000;
  • }
  • 效果图:

    把box-shadow投影类型改为inset,效果图:

    实例二:

    CSS Code复制内容到剪贴板
  • <divclass="shadow"></div>
  • .shadow{
  • width:200px;
  • height:50px;
  • box-shadow:0-5px5px0red,5px05px0yellow,05px5px0green,-5px05px0blue;
  • -webkit-box-shadow:0-5px5px0red,5px05px0yellow,05px5px0green,-5px05px0blue;
  • }
  • 效果图:

    text-shadow文字阴影

    上面我们讨论了关于css3图层阴影 box-shadow来实现图层阴影的效果,今天我们来共同学习一下如何实现文字阴影的效果,将用到css3的另外一个属性text-shadow,这两个效果分别增强了图层和文字的质感,创建立体效果。

    语法:

    XML/HTML Code复制内容到剪贴板
  • text-shadow:none|<length>none|[<shadow>,]*<shadow>或none|<color>[,<color>]*
  • text-shadow:X轴上的位移(正负皆可),Y轴上的位移(正负皆可),阴影的宽度,阴影的颜色值

    说明:
    和图层阴影相似,它也可以对同一对象应用一组或多组阴影效果,用逗号隔开。X轴偏移可以为正负,当X为正时向右偏移,为负时向左偏移。Y轴偏移可以为正负,当X为正时向下偏移,为负时向上偏移。阴影的颜色值可以是#xxx,也可以是rgb,还可以是rgba透明色。

    实例:text-shadow

    XML/HTML Code复制内容到剪贴板
  • <h1style="font-family:MicrosoftYahei;font-size:28px;color:#333;text-shadow:2px2px5px#f60;">雨打浮萍</h1>
  • 显示效果如下:

    对比box-shadow

    XML/HTML Code复制内容到剪贴板
  • <h2style="font-family:MicrosoftYahei;font-size:18px;color:#333;width:200px;line-height:30px;text-align:center;box-shadow:2px2px5px#f60;">专注于web前端开发</h2>
  • 效果如下:

    显示效果如下:

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章