• CSS实现文字阴影的效果


    CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).
    1、DropShadow
    语法:{FILTER:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)}
    Color 代表投影的颜色,格式为“#RRGGBB”
    OffX 和 OffY 代表x和y方向的投影偏移量。必须用整数值,正数代表x轴的右方向和y轴的下方向。负值相反。
    Positive 参数是一个布尔值。值为true(非0),那么就为任何的非透明像素建立可见的投影。如果值为false(0),那么就为透明的像素部分建立可见的投影。
    2、Shadow
    语法:{FILTER:Shadow(Color=color,Direction=direction)}
    Color 代表阴影的颜色,格式为“#RRGGBB”
    Direction是设置投影的方向,按照顺时针方向进行,0度代表垂直向上,然后每45度为一个单位。默认值是向左的270度。共8个方向。
    下面是应用这两个的例子:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    .dropshadow {  filter: DropShadow(Color=green, OffX=5, OffY=5, Positive=1); position: absolute; font-size: 14pt; font-weight: bolder; top: 20px; clip:   rect(   ); left: 20px}
    .shadow { filter: Shadow(Color=green, Direction=135); position: absolute; font-size: 14pt; font-weight: bolder ; left: 350px; top: 20px; clip:  rect(   )}
    -->
    </style>
    </head>

    <body bgcolor="#FFFFFF">
    <span class="dropshadow"><b>DropShadow</b></span> 
    <span class="shadow">Shadow</span>
    </body>
    </html>

    这两个属性是有区别的,Shadow依靠指定的角度值投射阴影,这些阴影是对象原先部分的延伸。而DropShadow是依靠指定在x方向和y方向的偏移量来定义投影的,这些投影其实是对象原封不动的移动。

  • 相关阅读:
    docker harbor 修改密码 重置密码 sql
    mongodb监控并在服务挂掉后自动重启脚本
    centos7 ffmpeg安装 rtsp相关
    vscode vue 自动格式化代码
    开启go module
    Python3.x:打包为exe执行文件(window系统)
    Docker 日志都在哪里?怎么收集?
    HttpsURLConnection信任任何证书
    SP3734 PERIODNI
    联赛前的记录
  • 原文地址:https://www.cnblogs.com/weimingxin/p/7272221.html
Copyright © 2020-2023  润新知