text-shadow，让我们大家一起来学习一下吧。

语法：

text-shadow：none | <shadow> [ , <shadow> ]*

<shadow> = <length>{2,3} && <color>?

默认值：none;

适用于：所有元素

继承性：有

取值：

none：无阴影

<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值

<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

<color>：设置对象的阴影的颜色，可以是rgba透明色。

说明：

可以设定多组效果，每组参数以逗号分隔。

兼容性：

示例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style>

 * {

     margin: 0;

     padding: 0;

 }

 body {

     font-family: Verdana, Geneva, Sans-serif;

 }

 div {

     margin-bottom: 10px;

 }

 /*基本阴影*/

 .exg_1 {

     font-size:5em;

     text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

     color:#FFF;

     text-align:center;

     background: #0ff;

 }

 /*深陷凸显*/

 .exg_2 {

     font-size: 5em;

     color: rgba(0,0,0,0.6);

     text-shadow: 2px 2px 3px rgba(255,255,255,0.1);

     text-align:center;

     background: #222;

 }

 /*硬边的阴影*/

 .exg_3 {

     font-size: 5em;

     color: #fff;

     text-shadow:6px 6px 0px rgba(0,0,0,0.2);

     text-align: center;

     background: #fff3cd;

 }

 /*双层阴影*/

 .exg_4 {

     font-size: 5em;

     color: #000;

     text-shadow:4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

     text-align: center;

 }

 /*有一定距离的阴影*/

 .exg_5 {

     font-size: 5em;

     color: #fff;

     text-shadow:0px 3px 0px #b2a98f,

                 0px 14px 10px rgba(0,0,0,0.15),

                 0px 24px 2px rgba(0,0,0,0.1),

                 0px 34px 30px rgba(0,0,0,0.1);

     text-align: center;

     background: #fff3cd;

 }

 /*密切结合并有阴影*/

 .exg_6 {

     font-size: 5em;

     color: #fff;

     text-shadow:0px 4px 3px rgba(0,0,0,0.4),

                 0px 8px 13px rgba(0,0,0,0.1),

                 0px 18px 23px rgba(0,0,0,0.1);

     text-align: center;

     background: #6bf9fb;

 }

 /*立体3D文字*/

 .exg_7 {

     font-size: 5em;

     color: #fff;

     text-shadow:0 1px 0 #ccc,

                 0 2px 0 #c9c9c9,

                 0 3px 0 #bbb,

                 0 4px 0 #b9b9b9;

     text-align: center;

     background: #3594c0;

 }

 /*嵌入式文字（仅支持谷歌）*/

 .exg_8 {

     font-size: 5em;

     color: #fff;

     background: #dbdbdb;

 }

 .exg_8 h1 {

     background: #666;

     -webkit-background-clip:text;

     -moz-background-clip:text;

     background-clip: text;

     color: transparent;

     text-shadow: rgba(255,255,255,0.1) 0px 3px 3px;

     text-align: center;

 }

 /*四周发光的文字*/

 .exg_9 {

     background: #992d23;

     font-size: 5em;

     color: #fff;

     text-shadow:0px 0px 9px rgba(255,255,255,0.7);

     text-align: center;

 }

 /*层叠文字*/

 .exg_10 {

     background: #6bf9fb;

     font-size: 5em;

     color: #fff;

     text-shadow: -10px 10px 0px #00e6e6,

                  -20px 20px 0px #01cccc,

                  -30px 30px 0px #00bdbd;

     text-align: center;

     padding-bottom: 0.5em;

 }

 /*多处光源投射*/

 .exg_11 {

     font-size: 5em;

     color: #fff;

     text-shadow: 0px 15px 5px rgba(0,0,0,0.1),

                  10px 20px 5px rgba(0,0,0,0.05),

                  -10px 20px 5px rgba(0,0,0,0.05);

     text-align: center;

     background: #6bf9fb;

     padding-bottom: 0.2em;

 }

 /*浮雕效果*/

 .exg_12 {

     font-size: 5em;

     color: rgba(0,0,0,0.6);

     text-shadow:2px 8px 6px rgba(0,0,0,0.2),

                 0px -5px 35px rgba(255,255,255,0.3);

     text-align: center;

     background: #609350;

 }

 </style>

 </head>

 <body>

     <div class="exg_1">

         <h1>marker</h1>

     </div>

     <div class="exg_2">

         <h1>marker</h1>

     </div>

     <div class="exg_3">

         <h1>marker</h1>

     </div>

     <div class="exg_4">

         <h1>marker</h1>

     </div>

     <div class="exg_5">

         <h1>marker</h1>

     </div>

     <div class="exg_6">

         <h1>marker</h1>

     </div>

     <div class="exg_7">

         <h1>marker</h1>

     </div>

     <div class="exg_8">

         <h1>marker</h1>

     </div>

     <div class="exg_9">

         <h1>marker</h1>

     </div>

     <div class="exg_10">

         <h1>marker</h1>

     </div>

     <div class="exg_11">

         <h1>marker</h1>

     </div>

     <div class="exg_12">

         <h1>marker</h1>

     </div>

 </html>

效果图如下：

css3のtext-shadow的更多相关文章

  1. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  2. [CSS3] Text ellipsis

    Link: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow div{ white-space: now ...

  3. CSS3 笔记三（Shadow/Text/Web Fonts）

    CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...

  4. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  5. CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  6. 使用CSS3的appearance属性改变元素的外观

    昨天在和同事一起完成项目的时候,我使用了appearance来渲染select,但是在firefox下出现问题,不完美,最后去除了.但还是要学习下这个属性.大家都知道每个浏览器对HTML元素渲染都不一 ...

  7. IE中的CSS3不完全兼容方案

    摘要: Internet Explorer,其本身也是足够强大的.IE特有的技术可以很好的实现一些CSS3的效果. 到Internet Explorer 8为止,IE系列是不支持CSS3的.在IE中要 ...

  8. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

  9. CSS3之阴影

    CSS3中新增属性-阴影,可以做出很多漂亮的效果. 文字阴影text-shadow text-shadow属性值的顺序: text-shadow: h-shadow v-shadow blur col ...

  10. CSS3：线上编辑工具及实用资料整理

    an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...

随机推荐

  1. codeforces 701E E. Connecting Universities(树的重心)

    题目链接: E. Connecting Universities time limit per test 3 seconds memory limit per test 256 megabytes i ...

  2. springmvc配置一：ajax请求防止返回中文乱码配置说明

    Spring3.0 MVC @ResponseBody 的作用是把返回值直接写到HTTP response body里. Spring使用AnnotationMethodHandlerAdapter的 ...

  3. Jmeter 施压 SQL server数据库的时候，如何设置？

    1. 在应用Jmeter进行施压之前,有个重要的端口需要手动查找出来.该端口在第三部要使用.开始——程序——microsoft SQL Server 2008R2——配置工具——SQL Server ...

  4. CF 757E Bash Plays with Functions——积性函数+dp+质因数分解

    题目:http://codeforces.com/contest/757/problem/E f0[n]=2^m,其中m是n的质因子个数(种类数).大概是一种质因数只能放在 d 或 n/d 两者之一. ...

  5. @Autowired注解和启动自动扫描的三种方式（spring bean配置自动扫描功能的三种方式）

    前言: @Autowired注解代码定义 @Target({ElementType.CONSTRUCTOR, ElementType.FIELD, ElementType.METHOD, Elemen ...

  6. Docker 与 宿主机之间的文件cp

    Docker 与 宿主机之间的文件cp 第一种方法是官方比较推荐的,其实和第二种方法实现是一样的. 第一种方法例: 将主机/www/runoob目录拷贝到容器96f7f14e99ab的/www目录下. ...

  7. u盘启动安装系统

    七彩虹主板如何设置U盘启动,本文就以七彩虹CG41主板为例详细的讲讲U盘启动设置方法. 几天前,想用U盘启动的时候,发现CG41主板启动顺序里找不到USB项,Boot Device Priority( ...

  8. log4j的学习和log4j在程序中使用的加载作用过程

    昨天进行代码评审的时候,大家都纠结在了日志信息应该如何输出上,其实我想大家应该一直都在使用log4j来对日志信息进行输出,但是未想应该有很大一部分人对log4j是不了解的,我遇到这个问题的时候也到网上 ...

  9. 如何实现Ant design表单组件封装？

    目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...

  10. 无法序列化会话状态。请注意，当会话状态模式为“StateServer”或“SQLServer”时，不允许使用无法序列化的对象或 MarshalByRef 对象。

    原文链接:http://blog.csdn.net/byondocean/article/details/7564502 session是工作在你的应用程序进程中的.asp.net进程.iis往往会在 ...