文本阴影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. java向mysql数据库插入数据显示乱码的问题

    在做一个java web工程时,有时会碰到在向数据库添加数据库时,结果出现乱码”???“的问题.针对该问题的主要解决办法就是: 一.确保是否添加了字符集过滤器: 在java web工程中的web.xm ...

  2. 《Administrator's Guide》之Managing Memory

    Automatic Memory Management 1. 如果要启动Automatic Memory Management,如何确定MEMORY_TARGET的值呢? 1> 在SQL*Plu ...

  3. 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...

  4. WEB编程中获取src目录下的文件（没有src目录）

    这种情况遇见的会比较多,像一个WEB工程,如果在src下面写了一个xml或者一些其它的文件,当工程发布到服务器时,web程序是在tomcat等服务器下运行这个程序的,这个时候,程序目录里面并没有src ...

  5. 基于HTML5 WebGL实现3D飞机叶轮旋转

    在上一篇<基于HT for Web矢量实现2D叶轮旋转>中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用. 在3D拓扑上可以创建各种各样的图元,在HT for W ...

  6. C#实现WinForm DataGridView控件支持叠加数据绑定

    我们都知道WinForm DataGridView控件支持数据绑定,使用方法很简单,只需将DataSource属性指定到相应的数据源即可,但需注意数据源必须支持IListSource类型,这里说的是支 ...

  7. C# 代码编程规范

    1.       类一定要有注释 2.       C#代码要用#region包起来,#region之间要留一个且只留一个空行 3.       含义复杂不容易看懂的参数要写注释 4.       方 ...

  8. EditText html 出现提示 This text field does not specify an inputType or a hint

      1 <EditText 2 android:layout_width="fill_parent" 3 android:layout_height="wrap_c ...

  9. 编写高性能SQL

    前言:系统优化中一个很重要的方面就是SQL语句的优化.对于海量数据,劣质SQL语句和优质SQL语句之间的速度差别可达到上百倍,可见对于一个系统不是简单的能实现其功能就可以了,而是要写出高质量的SQL语 ...

  10. Asp.net中使用Server.HtmlDecode(string str)的使用

    前言: 在使用Visual Studio开发web页面时,需要在GridView中绑定Table数据,并加入了CommandField, 试图,点击详情按钮是,获取GridView中Rows中Cell ...