只要先理解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. ActiveMQ(5.10.0) - 使用 JDBC 持久化消息

    1. 编辑 ACTIVEMQ_HOME/conf/activemq.xml. <beans> <broker brokerName="localhost" per ...

  2. 百练 2973 Skew数 解题报告

    思路: 计算出每一个skew数的不同位数表示的权值,然后用该位与权值相乘.用int数组来装权值,用char数组来装skew数. 代码: #include<stdio.h> #include ...

  3. JavaBean之简单应用JSP页面

    JavaBean的属性可以是任意类型,并且一个JavaBean可以有多个属性.每个属性通常都需要具有相应的setter. getter方法,setter方法称为属性修改器,getter方法称为 属性访 ...

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

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

  5. Caching和Purgeable Memory （译）

    Caching和Purgeable Memory对于开发者来说是一个至关重要的资源,尤其是当我们需要处理那些需要超大内存以及计算时间的对象或者是当计算机向磁盘写入数据时导致应用程序陷入停滞时特别有用处 ...

  6. self指向函数地址 动态调用函数的简单例子

    #import <Foundation/Foundation.h> @interface Person : NSObject - (void)test1; - (void)test2:(N ...

  7. L010-oldboy-mysql-dba-lesson10

    L010-oldboy-mysql-dba-lesson10 来自为知笔记(Wiz)

  8. RHEL6.3 ftp服务器参数的戏说——不看白不看，看了不白看

    大家都知道ftp服务器的应用何止广,简直就是无处不在,配置简单的ftp服务谁都会,无外乎就是刚安装好ftp服务,一启动就ok了:或是达到简单的上传下载修改下/var/ftp/pub的权限,配合配置文件 ...

  9. vi 技巧

    :%s/^/\//   行首加 / :%s/$/\//    行尾加/ :%s/^\///g   行首减 / :%s/\/$//g   行尾减/ :%s/^\s*//g  行首减 空格   

  10. Linux ed

    ed 编辑器是 Linux 操作系统下最简单的文本编辑器.它是以行为单位对文件进行编辑的编辑器,而不像 MS-DOS 系统下的 edit 那样是以整个屏幕框架为单位对文件进行编辑的.因此,如果你已经习 ...