您现在的位置是：网站首页> 编程资料编程资料

详解CSS3的图层阴影和文字阴影效果使用CSS3实现的渐变幻灯片效果css3中less实现文字长阴影(long shadow)CSS3的文字阴影—text-shadow的使用方法css文字阴影渐渐模糊效果的实现

2021-09-05 900人已围观

简介 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垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值

实例一：

CSS Code复制内容到剪贴板
  1. "shadow">
  
  • .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;   
  • }  

    • 效果图：
    201669111325178.jpg (221×71)

    把box-shadow投影类型改为inset，效果图：
    201669111350004.jpg (210×57)

    实例二：

    CSS Code复制内容到剪贴板
    1. "shadow">
      
  • .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;   
  • }  

    • 效果图：
    201669111427729.jpg (227×78)

    text-shadow文字阴影

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

    语法：

    XML/HTML Code复制内容到剪贴板
    1. 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复制内容到剪贴板
    1. <h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍h1>  

    显示效果如下：
    201669111554919.png (148×75)

    对比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>  

    效果如下：
    201669111614038.png (250×69)

    显示效果如下：
    201669111632952.png (200×87)

    上一篇：SCSS移动端页面遮罩层效果的实现及常见问题解决CSS实现鼠标移至图片上显示遮罩层效果css div实现的遮罩层完美兼容IE6-IE9 FireFoxCSS实现带遮罩层可关闭的弹窗效果

    下一篇：实例讲解CSS3中的box-flex弹性盒属性布局10分钟理解CSS3 FlexBox弹性布局CSS3 Flex 弹性布局实例代码详解css flex 弹性布局详解CSS3弹性盒模型flex box快速入门心得(必看篇)基础的CSS3弹性盒Flexbox布局使用实例flex弹性盒布局最后一行左对齐的实现思路

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网