只要先理解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. HttpClient(4.3.5) - HTTP Execution Context

    Originally HTTP has been designed as a stateless, response-request oriented protocol. However, real ...

  2. 【转载】Android推送方案分析（MQTT/XMPP/GCM）

    http://m.oschina.net/blog/82059 本文主旨在于,对目前Android平台上最主流的几种消息推送方案进行分析和对比,比较客观地反映出这些推送方案的优缺点,帮助大家选择最合适 ...

  3. Bootstrap引用

    <!--设置移动设置页面标准-->        <meta name="viewport" content="width=device-width,i ...

  4. Oracle 硬解析查询

    -- 硬解析的 parse count (hard) select * from v$sysstat where name like '%parse%'; select a.value,b.name ...

  5. GISer 应届生找工作历程（完结）

    有半个月没更博客了,前几天在学校准备这保研,因为没有时间复习高数自然就没有过.    也没啥的,我本来就不打算复习,就是看看运气咋样(哈哈).在昨天开始跑的招聘会,一天下来不同地方跑了三家挺累的,记录 ...

  6. 利用多核来加速Linux命令行

    本文转载自 多核CPU来加速 awk, sed, bzip2, grep, wc等,如需查看原文,请点此链接进入. -------------------------------我是分割线 开始 -- ...

  7. java运算符新用法和^新认识

    public class Demo1 { public static void main(String[] args) { boolean t = false | true; System.out.p ...

  8. 窗体位置设置StartPosition属性

    有如下选项,分别含义如下: CenterParent                    窗体在其父窗体中居中.      CenterScreen                    窗体在当前 ...

  9. 声明（创建） JavaScript 变量

    在 JavaScript 中创建变量通常称为"声明"变量. 我们使用 var 关键词来声明变量: var carname; 变量声明之后,该变量是空的(它没有值). 如需向变量赋值 ...

  10. Centos 6.5编译安装Nginx+php+Mysql

    说明: 操作系统:CentOS 6.5 64位 准备篇: 一.配置好IP.DNS .网关,确保使用远程连接工具能够连接服务器 二.配置防火墙,开启80端口.3306端口 vi /etc/sysconf ...