详解CSS3的涂层黑影和文本黑影实际效果应用

日期：2021-03-03 类型：科技新闻 

关键词：h5平台，手机端网页，手机端网页模板，免费的h5场景制作平台，h5制作工具

box-shadow涂层黑影

box-shadow:黑影种类 X水平偏位(可取正负值) Y竖直偏位(可取正负值) 黑影尺寸 黑影拓展 黑影色调值
黑影种类能够省略，默认设置为外投射，当它的值为inset时，为内黑影实际效果。
X水平偏位和Y竖直偏位可取正负值，当X为负值是投射在左侧，为正时投射在右侧。当Y为负值时投射在上面，为正时投射在下面。
黑影尺寸和拓展与ps里边的基本原理1样。

访问器适配性：
不一样的访问器适配性不一样，mozilla核心的访问器写法以下（但新版本号的火狐访问器早已不必须再加上）：
-moz-box-shadow:黑影种类 X水平偏位(可取正负值) Y竖直偏位(可取正负值) 黑影尺寸 黑影拓展 黑影色调值
webkit核心的访问器写法以下：
-webkit-box-shadow:黑影种类 X水平偏位(可取正负值) Y竖直偏位(可取正负值) 黑影尺寸 黑影拓展 黑影色调值

案例1：

CSS Code拷贝內容到剪贴板
  1. <div class="shadow"></div>   
  2. .shadow{   
  3.  width:200px;   
  4.  height:50px;   
  5.  box-shadow:3px 3px 3px 3px #000;   
  6.  /*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐为意味着的mozilla核心访问器，火狐如今的版本号早已适用这个特性，因此无需再加-moz*/  
  7.  -webkit-box-shadow:3px 3px 3px 3px #000;   
  8. }  

实际效果图：

把box-shadow投射种类改成inset，实际效果图：

案例2：

CSS Code拷贝內容到剪贴板
  1. <div class="shadow"></div>   
  2. .shadow{   
  3.  width:200px;   
  4.  height:50px;   
  5.  box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
  6.  /*-moz-box-shadow:0 ⑸px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,⑸px 0 5px 0 blue;    //以火狐为意味着的mozilla核心访问器，火狐如今的版本号早已适用这个特性，因此无需再加-moz*/  
  7.  -webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
  8. }  

实际效果图：

text-shadow文本黑影

上面大家探讨了有关css3涂层黑影 box-shadow来完成涂层黑影的实际效果，今日大家来相互学习培训1下怎样完成文本黑影的实际效果，将用到css3的此外1个特性text-shadow，这两个实际效果各自提高了涂层和文本的质感，建立立体式实际效果。

英语的语法：

XML/HTML Code拷贝內容到剪贴板
  1. text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*   

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

表明：
和涂层黑影类似，它还可以对同1目标运用1组或多组黑影实际效果，用逗号分隔。X轴偏位能够为正负，当X为正时向右偏位，为负时向左偏位。Y轴偏位能够为正负，当X为正时向下偏位，为负时向上偏位。黑影的色调值能够是#xxx，还可以是rgb，还能够是rgba全透明色。

案例：text-shadow

XML/HTML Code拷贝內容到剪贴板
  1. <h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍</h1>  

显示信息实际效果以下：

比照box-shadow

XML/HTML Code拷贝內容到剪贴板
  1. <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>  

实际效果以下：

显示信息实际效果以下：

上一篇：详解IE访问器的haslayout特性及有关适配性难题处理 返回下一篇：没有了