欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3的图层阴影和文字阴影的使用

程序员文章站 2022-04-08 11:30:16
...
这篇文章主要介绍了关于CSS3的图层阴影和文字阴影的使用,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

box-shadow图层阴影属性和text-shadow文字阴影属性在用法上差不多,都以X轴和Y轴坐标系来控制阴影扩展,这里我们就来详解CSS3的图层阴影和文字阴影效果使用:

box-shadow图层阴影

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

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

实例一:

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:3px 3px 3px 3px #000;   
 /*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/
 -webkit-box-shadow:3px 3px 3px 3px #000;   
}

效果图:

CSS3的图层阴影和文字阴影的使用

把box-shadow投影类型改为inset,效果图:
CSS3的图层阴影和文字阴影的使用

实例二:

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
 /*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;    //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/
 -webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
}

效果图:

CSS3的图层阴影和文字阴影的使用

text-shadow文字阴影

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

语法:

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

text-shadow:X轴上的位移(正负皆可),Y轴上的位移(正负皆可),阴影的宽度,阴影的颜色值

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

实例:text-shadow

<h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍</h1>

显示效果如下:

CSS3的图层阴影和文字阴影的使用

对比box-shadow

<h2 style="font-family:Microsoft Yahei; font-size:18px; color:#333; width:200px; line-height:30px; text-align:center; box-shadow:2px 2px 5px #f60;">专注于web前端开发</h2>

效果如下:
CSS3的图层阴影和文字阴影的使用

显示效果如下:
CSS3的图层阴影和文字阴影的使用

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

对于css中使用rgba和opacity设置透明度的区别分析

如何用css3实现多个元素依次显示

使用css如何让背景图片拉伸填充避免重复显示

以上就是CSS3的图层阴影和文字阴影的使用的详细内容,更多请关注其它相关文章!

相关标签: CSS3 阴影