文本阴影text-shadow属性特效：

1.右下角阴影，左下角阴影，左上角阴影，右上角阴影

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>text-shadow</title>

     <style>

         p{

           text-align:center;

           margin:0;

           font-family: helvetica,arial,sans-serif;

           color:#999;

           font-size:80px;

           font-weight:bold;

           text-shadow:10px 10px #333;

         }

     </style>

 </head>

 <body>

     <p>Text Shadow</p>

 </body>

 </html>

文字效果为：

如果将text-shadow改成：text-shadow:-10px 10px #333 ，就将出现左下角阴影

将text-shadow改成：text-shadow:-10px -10px #333 , 就将出现左上角阴影

将text-shadow改成：text-shadow: 10px -10px #333 , 就将出现右上角阴影

2.使用text-shadow设置立体文字效果

 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title>text-shadow</title>

  6     <style>

  7         p{

  8           text-align:center;

  9           margin:0;

 10           font-family: helvetica,arial,sans-serif;

 11           color:#999;

 12           font-size:80px;

 13           font-weight:bold;

 14           text-shadow:-1px -1px #fff,

                                     1px 1px #333;

 15         }

 16     </style>

 17 </head>

 18 <body>

 19     <p>Text Shadow</p>

 20 </body>

 21 </html>

CSS3 一、文本阴影text-shadow属性的更多相关文章

  1. 【CSS3】---文本阴影text-shadow

    text-shadow可以用来设置文本的阴影效果. 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时 ...

  2. CSS3之文本阴影text-shadow

  3. CSS文本阴影实例

    原文 简书原文:https://www.jianshu.com/p/5abf2fa2f1b9 前言 以下的实例是我从<CSS实战>中看到的实例,当我看到这些实例的时候,发现平时不是很在意的 ...

  4. CSS中使用文本阴影与元素阴影

    文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...

  5. css文本阴影

    文本阴影-text-shadow text-shadow 属性向文本添加一个或多个阴影.该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定,省略的长度是 0. h-sha ...

  6. CSS3 --添加阴影（盒子阴影、文本阴影的使用）

     CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...

  7. CSS3文本阴影、边框阴影

    CSS3添加阴影 一.使用text-shadow属性为文本添加阴影 二.使用box-shadow属性为边框添加阴影 一.为文本添加阴影 text-shadow     使用text-shadow,可以 ...

  8. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  9. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [译]对 AngularJS 模板的A/B测试

    编者按:本文翻译自 Andrei Bondarev 在 Medium 上发布的"A/B Testing your AngularJS Templates ",Andrei 是一名工 ...

  2. 帮助文档的制作javadoc

    将自己写的工具类Tool的Tool.class文件发送给其他人,其他人只要将该文件设置到classpath路径下,就可以使用该工具类. 但是很遗憾,该类中到底定义了多少个方法,对方却不清楚,因为该类并 ...

  3. 解决erlang节点启动失败报["inet_tcp",econnrefused]的问题

    今天有同事说他机器上的leofs启动不了.我用console起了一下,发现报如下错: {error_logger,{{2015,11,3},{6,23,6}},"Protocol: ~tp: ...

  4. 数据库备份与还原SQL代码

    --备份数据库 --必须先创建Backup文件夹 ) SET @name = 'D:\Backup\DingHanECard_V2_ZQGDJ_' ), ) + '.bak' BACKUP DATAB ...

  5. Android APP压力测试(一)之Monkey工具介绍

    Android APP压力测试(一) 之Monkey工具介绍 前言 本文主要介绍Monkey工具.Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸屏幕.滑动. ...

  6. CentOS7 Java安装

    CentOS7 Java安装 CentOS7 Java安装 Download 从Oracle下载jdk-8u31-linux-x64.rpm Install 御载 执行如下命令 java -versi ...

  7. Javascript编程风格

    Douglas Crockford是Javascript权威,Json格式就是他的发明. 去年11月他有一个演讲(Youtube),谈到了好的Javascript编程风格是什么.我非常推荐这个演讲,它 ...

  8. Windows Server 2012安装时所需要的KEY

    Windows Server 2012不像Server 2008和2008 R2那样可以先装系统再输入序列号,而是在一开始就必须输入Server 2012 cdkey,目前在网上找到两枚序列号,标准版 ...

  9. 七、L2CAP

    1.      L2CAP 在BR/EDR模式下,在connection procedure成功执行后,两台设备通过一条物理信道(physical channel)连接在一起,同时两者之间建立起了一条 ...

  10. 使用Graphviz绘图（一）

    前言 日常开发或者编写课程论文时,除了代码文档的编写,其中一个很重要的部分就是需要绘制流程图.示意图 绘制流程图有很多工具,一般常见的就有如下几种: Word.PPT等办公软件 Viso以及开源的Di ...