只要先理解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. HDOJ2008数值统计

    数值统计 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  2. 使用TreeView+ListBox+TxtBox 资料管理器

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. SQL Server 错误行号

    https://msdn.microsoft.com/zh-cn/library/ms178600.aspx 返回发生错误的行号,该错误导致运行 TRY…CATCH 构造的 CATCH 块. 语法 E ...

  4. OpenMP多线程linux下的使用，简单化

    http://hi.baidu.com/diwulechao/item/bc6d865c411b813c32e0a932 http://www.cnblogs.com/yangyangcv/archi ...

  5. Cisco中删除flash通过tftp服务器恢复

    首先我们来看一下,Cisco路由器中的flash文件.通过show flash 命令来查看. 这时可以看到flash的版本是c1841-ipbasek9-mz.124-12.bin 下面我们删除这个f ...

  6. Contoso 大学 - 10 - 高级 EF 应用场景

    原文 Contoso 大学 - 10 - 高级 EF 应用场景 By Tom Dykstra, Tom Dykstra is a Senior Programming Writer on Micros ...

  7. reduce + Promise 顺序执行代码

    本文地址: http://www.cnblogs.com/jasonxuli/p/4398742.html 下午的太阳晒得昏昏沉沉,和上周五一样迷糊,看一段代码半天没看明白,刚才不知不觉眯了几分钟,醒 ...

  8. javascript笔记——js面试问题

    1:javascript中的变量提升(先使用再声明,js中的函数也存在函数提升) 2:js中的事件捕获和事件冒泡(是两个相反的过程) 3:js中的动画队列(比如animate动画没有在点击的时候阻止正 ...

  9. spring事务到底用于service层还是dao层

    Spring事务为业务逻辑进行事务管理,保证业务逻辑上数据的原子性. 事务得根据项目性质来细分:事务可以设置到三个层面(dao层.service层和web层). 第一:web层事务,这一般是针对那些安 ...

  10. open_clientfd(char* hostname,int port)和open_listenfd(int port)

    #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <string.h&g ...