文本阴影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. 如何利用Direct NFS克隆数据库

    CloneDB是Oracle 11.2.0.3推出的一项新特性,它利用的了11g新引入的Direct NFS.它直接利用目标数据库的备份,无需将备份COPY到克隆环境下,使得一个备份可以克隆多个不同用 ...

  2. Oracle Dataguard之Real-Time Apply

    Oracle Dataguard一共支持三种模式:最大可用模式(Maximum Availability),最大性能模式(Maximum Performance),最大保护模式(Maximum Pro ...

  3. 新手学习Python时常见的错误

    最近学习Python,现在把一些常见的错误总结如下: 1)忘记在 if , elif , else , for , while , class ,def 声明末尾添加 :(导致 "Synta ...

  4. Linux演示 dd测试IO

    dd测试IO,经常会用到,用来简单测试某个目录的读写性能. 本次测试环境:自己电脑的ubuntu系统-其他Unix/Linux系统也可以用dd. Tips:dd操作需要三思而行,搞清楚确认没问题再进行 ...

  5. 15 Best Responsive HTML5 Frameworks 2014

    Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...

  6. Elasticsearch聚合 之 DateRange日期范围聚合

    相比于range聚合,date range就是范围可以由时间来指定. 例如: { "aggs":{ "range":{ "date_range&quo ...

  7. 用Latex写学术论文： IEEE Latex模板和文档设置(\documentclass)

    1.可以在博客园中使用latex代码输出公式,以后再以不用复制图片粘贴啦: http://www.cnblogs.com/cmt/p/3279312.html 例如以下代码两边加上 $ 符号后 x(k ...

  8. winform时钟c#代码

    代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  9. 关于JS

    首先推荐一个小插件:W3Cfuns前端开发工具箱 整理一些杂乱的知识点. 1,Dom用于操作html元素 2,window.location.reload();//刷新当前页********** 3, ...

  10. Java总结篇系列：Java String

    String作为Java中最常用的引用类型,相对来说基本上都比较熟悉,无论在平时的编码过程中还是在笔试面试中,String都很受到青睐,然而,在使用String过程中,又有较多需要注意的细节之处. 1 ...