zoukankan      html  css  js  c++  java
  • 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方向的偏移量来定义投影的,这些投影其实是对象原封不动的移动。

  • 相关阅读:
    bash命令
    集群解析
    临时配置网络(ip,网关,dns)+永久配置
    nginx反向代理三台web
    源码安装nginx
    nginx反向代理+三台web+nfs共享存储实现集群配置
    jQuery学习笔记(一):入门【转】
    你是怎么把字符串“2016-11-16” 变为 “16/11/2016” 的? 【转】
    用css画出三角形【转】
    JS中常遇到的浏览器兼容问题和解决方法【转】
  • 原文地址:https://www.cnblogs.com/weimingxin/p/7272221.html
Copyright © 2011-2022 走看看