只要先理解text-shadow的原理，就能用定位元素进行效果的模仿。

　　text-shadow: h-shadiv v-shadov blur color

　　h-shadv为文本水平移动的距离，正值相对于当前位置向右，负值相对于当前位置向左；

　　v-shadov为文本垂直移动的距离，正值相对于当前位置向下，负值相对于当前位置向上；

　　blur为可选值。即模糊的距离。如果放在三维坐标系中，就是z值，离观察者的远近，浏览器中视觉上的效果就是清晰程度、颜色的浅淡程度；

　　color文本颜色设置；

　　经过以上分析，你知道，h-shadv、v-shadv、blur其实和一个相对定位元素的属性很像，其实说白了就是一样的。这样去理解以下代码实现就不再会有问题。可以理解为第一个shadowed是母文本，第二个shadowed是阴影文本，第二个shadowed相对于第一个shadowed进行绝对定位，设置其top、left、z-index就可以模拟出阴影。

<!doctype html>

<html>

    <head></head>

    <body>

        <!-- text-shadow属性自动产生阴影效果 -->

        <span style="text-shadow:5px 3px 1px; #888">shadowed</span>

        <!-- 这里我们利用定位可以产生相同的效果 -->

        <span style="position: relative;">

            shadowed  <!-- 投射阴影的文本 -->

            <span style="position:absolute;top:3px;left:5px;z-index:1;color:#888">

                shadowed  <!-- 这里是阴影 -->

            </span>

        </span>

    </body>

</html>

CSS的定位属性实现text-shadow属性的文本下产生阴影效果的更多相关文章

  1. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

  2. [CSS]文本属性（Text）

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  3. 复习-css元素定位

    css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  6. CSS基础 定位相关属性的使用方法

    1.相对定位:position:relative: 属性名:position 属性值:relative: 特点:1.相对自己的位置移动 2.配合方位名词移动,如:top.left.right,bott ...

  7. css最终章之浮动、定位、溢出属性处理、z-index属性、透明度

    上期内容回顾 CSS简介 # 主要就是给HTML标签添加样式 # 固定语法结构 选择器 {属性名1:属性值;属性名2:属性值} 三种引用方式 1.link标签引入外部css文件(最正规) 2.HTML ...

  8. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  9. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

随机推荐

  1. Linux 命令 - watch: 反复执行命令，全屏显示输出

    watch 命令周期性地执行命令,全屏显示输出.可以通过 watch 命令反复执行某一程序来监视它的输出变化. 命令格式 watch [-dhvt] [-n <seconds>] [--d ...

  2. Linux C编程--打开和关闭流

    以下函数用于打开和关闭一个流.#include <stdio.h>FILE * fopen (const char *pathname, const char *opentype);int ...

  3. C＃中的DateTime：本周第一天，本月第一天，今年第一天，本周第一天的时间

    有时辰需要按照当前时刻,断定其它的都没有什么难度,只是本季度稍稍麻烦些.因为一年有四个季度,可以按照当前月份,获得本季度第一个月的月份,然后这个月的第一天,就是本季度的第一天了 DateTime dt ...

  4. 使用subst创建虚拟磁盘及设置分区卷标

    最近项目中要研究在"计算机"中添加虚拟磁盘,能够访问某远端目录,同时还要在资源管理器中可以看到创建的虚拟磁盘.关于虚拟磁盘,有几种方式: (1)映射网络磁盘:通过映射网络驱动器,可 ...

  5. win2003域控制器密码遗忘如何修改

    在公司遇到这么个事儿,员工搭建QC服务器,设置了域账户登陆系统.但忘记了登录密码,使用PE直接修改sam文件不好用.   1.使用PE进系统修改组登陆方式的账号administrator密码 需符合复 ...

  6. Entity Framework问题：ReferentialConstraint 中的依赖属性映射由存储生成的列

    原文:Entity Framework问题:ReferentialConstraint 中的依赖属性映射由存储生成的列 今天在采用Entity Framework 的Database First反向以 ...

  7. 【转】C#绝对新手之C#中的多线程小结

    大概有4种方法: Dispatcher.异步委托.手动多线程.BackgroundWorker,另外还有一个DispatcherTimer,是定时器. 其中Dispatcher与DispatcherT ...

  8. ASP.NET实现在线人员实时显示

    在最近的学习中,参考其他资源,做了一个简单的在线人员显示的功能,总结了一下,思路如下: 1.定义一个全局的内存来作为在线人员列表 2.通过实时判断用户Session值,来判断某个用户的登录或离线 3. ...

  9. 手机APP与原生APP设计的区别

    交互上可以按照原生App的设计方式,效果将越来越接近,主要区别在于: 1.设计中要考虑到浏览器地址栏和工具栏的占有空间,和其对App的操作存在一定的影响. 2.暂时不适合调用系统底层接口,更适合web ...

  10. （四）Qt之右键菜单

    1.右键菜单创建和显示 作为一种交互性强.使用方便的右键菜单在程序中是非常常用的,在Qt中可以轻松的实现. QMenu menu; //添加菜单项,指定图标.名称.响应函数 menu.addActio ...