text-shadow  [tɛkst] - [ˈʃædoʊ]
 
定义:
text-shadow: none | <shadow> [,<shadow>]*
<shadow><length>{2,3} && color
  • <length>--1:阴影的水平偏移量,正值阴影在右侧,负值阴影在左侧,必填
  • <length>--2:阴影的垂直偏移量,正值阴影在底部,负值阴影在顶部,必填
  • <length>--3:阴影的模糊距离,必须为正值,值越大,阴影边缘越模糊,非必填
  • color:阴影颜色
 
注:
  • <length>必须为具体的长度单位值,不可使用百分比
  • 可以为一个元素指定多个阴影
 
示例:

1).霓虹灯效果

.demo1{
text-shadow: 0 0 20px #fff;
color: #fff;
}

.demo1{
color: #fff;
/*添加多个阴影效果*/
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de;
}

2).投影效果

.demo2{
color: #000;
text-shadow: 0 1px 1px #fff;
}

3).浮雕效果

.demo3{
color: #ccc;
text-shadow: -1px -1px 0 #fff,
1px 1px 0 #333,
1px 1px 0 #444;
}

4).模糊效果

.demo4{
color: transparent;
text-shadow: 0 0 5px #f96;
}
5).3D效果

.demo5{
color: #fff;
/*text-shadow不支持阴影外延,所以使用多个阴影效果模拟*/
text-shadow: 1px 1px rgba(197, 223, 248,0.8),
2px 2px rgba(197, 223, 248,0.8),
3px 3px rgba(197, 223, 248,0.8),
4px 4px rgba(197, 223, 248,0.8),
5px 5px rgba(197, 223, 248,0.8),
6px 6px rgba(197, 223, 248,0.8);
}
 
6).复古效果

.demo6{
color: #eee;
text-shadow: 5px 5px 0 #666,
7px 7px 0 #eee;
}

text-shadow 详解及示例的更多相关文章

  1. Wordpress菜单函数wp_nav_menu各参数详解及示例

    Wordpress菜单函数wp_nav_menu各参数详解及示例   注册菜单 首先要注册菜单,将以下函数添加至function.php函数里   register_nav_menus(array( ...

  2. Oracle创建表语句(Create table)语法详解及示例、、 C# 调用Oracle 存储过程返回数据集 实例

    Oracle创建表语句(Create table)语法详解及示例 2010-06-28 13:59:13|  分类: Oracle PL/SQL|字号 订阅 创建表(Create table)语法详解 ...

  3. Kubernetes K8S之affinity亲和性与反亲和性详解与示例

    Kubernetes K8S之Node节点亲和性与反亲和性以及Pod亲和性与反亲和性详解与示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-mas ...

  4. Android总结篇——Intent机制详解及示例总结

         最近在进行android开发过程中,在将 Intent传递给调用的组件并完成组件的调用时遇到点困难,并且之前对Intent的学习也是一知半解,最近特意为此拿出一些时间,对Intent部分进行 ...

  5. FFmpeg(2)-avformat_open_input()函数详解并示例打开mp4文件

    一. 解封装 pts 是显示的时间 dts是解码的时间, 这个时间是用来做同步. av_register_all(), 注册所有的格式.包括解封装格式和加封装格式. avformat_network_ ...

  6. phaser学习总结之Text对象详解

    前言 在phaser学习总结之phaser入门教程中,我们已经入门了phaser,对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解,本章将对phaser中的Text ...

  7. Kubernetes K8S之Service服务详解与示例

    K8S之Service概述与代理说明,并详解所有的service服务类型与示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master Cent ...

  8. Kubernetes K8S之Ingress详解与示例

    K8S之Ingress概述与说明,并详解Ingress常用示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS7.7 2C ...

  9. Oracle创建表语句(Create table)语法详解及示例

    创建表(Create table)语法详解1. ORACLE常用的字段类型ORACLE常用的字段类型有VARCHAR2 (size) 可变长度的字符串, 必须规定长度CHAR(size) 固定长度的字 ...

  10. aggregate和annotate方法使用详解与示例

    aggregate和annotate方法的使用场景 Django的aggregate和annotate方法属于高级查询方法,主要用于组合查询.当我们需要对查询集(queryset)的某些字段进行计算或 ...

随机推荐

  1. Android绘图机制(二)——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解

    Android绘图机制(二)--自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解 我们要想画好一些炫酷的View,首先我们得知道怎么去画一些基础的图案,比如矩形,圆 ...

  2. ruby调用Office Jet引擎压缩access数据库

    由于单位业务需要,搭建一台服务器专门用来做数据存储.因为数据流很小,遂采用access库作为DB.开始还好,但是后来发现access数据库有一问题,就是表空间会随着使用越来越大,哪怕表里没有数据.因为 ...

  3. js定义数组的方法

    1.定义时赋值 var mycars=new Array("a","b","c") 2.new一个数组对象 var mycars=new A ...

  4. AngularJS学习笔记之directive——scope选项与绑定策略

    开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...

  5. Java---SSH(MVC)面试题

    1.        谈谈你mvc的理解 MVC是Model-View-Controler的简称.即模型-视图-控制器.MVC是一种设计模式,它强制性的把应用程序的输入.处理和输出分开. MVC中的模型 ...

  6. eclipse调试的方法和技巧

    eclipse调试图标所代表的含义: Step into 单步进入-将进入执行的方法内部继续执行. Step over  单步前进-执行下一步. Step return – 单步退出-跳出正在执行的方 ...

  7. werfault进程使用CPU率高

    werfault进程是Windows vista 错误报告进程,是用来向微软反馈报告.是安全的正常进程. 解决方法:1.打开控制面板”—“系统和维护”,点击“问题报告和解决方案”. 2.点击“更改设置 ...

  8. P2453 [SDOI2006]最短距离

    题目描述 一种EDIT字母编辑器,它的功能是可以通过不同的变换操作可以把一个源串X [l..m]变换为新的目标串y[1..n].EDIT提供的变换操作有: 源串中的单个字符可被删除(delete): ...

  9. VirtualBox虚拟机网络设置(四种方式)

    原文地址: https://www.douban.com/group/topic/15558388/ VirtualBox的提供了四种网络接入模式,它们分别是: 1.NAT 网络地址转换模式(NAT, ...

  10. 基于Django的独立运行脚本开发

    1.在Django框架下工作时间长了,会对Django的技术设施产生依赖,比如其方便的ORM,如果写基于Django的独立运行脚本,主要在脚本前面加上以下代码: import sys,os,djang ...