文本阴影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. 关于pt与px

    pt:point,点,是印刷业一个标准的长度单位,1pt＝1/72英寸:  在Windows里,默认的显示设置中,把文字定义为96dpi.这说明了:1px＝1/96英寸:而1pt＝1/72英寸,可以得 ...

  2. 2014PPTV-题解

    今天在看PPTV几道题目,顺便联系起红宝书<JavaScript高级程序设计>一起看了起来. 1. var msg = 'hello';//顶级作用域windwo下有个变量msg func ...

  3. （转）sql的join图解

    假设我们有两张表,Table A是左边的表,Table B是右边的表. 其各有四条记录,其中有两条记录是相同的,如下所示: 1 id name       id  name 2 -- ----     ...

  4. REST API出错响应的设计

    REST API应用很多,一方面提供公共API的平台越来越多,比如微博.微信等:一方面移动应用盛行,为Web端.Android端.IOS端.PC端,搭建一个统一的后台,以REST API的形式提供服务 ...

  5. android调试输出

    测试时不想直接debug总要调试输出一些字符串信息,那以下方法可选: 1.用Log.i(TAG, "onCreate");日志输出. 先要引用 import android.uti ...

  6. JS代码格式化和语法着色

    有时为了研究学习一些格式不规范的JS代码段,需要将代码段格式化一下,这样思路就会清晰多了,网上找到此款格式化的工具,将以下代码保存为html格式文件即可使用 <html> <head ...

  7. Elasticsearch嵌套聚合

    Elasticserch在新版本中支持聚合操作,而聚合操作也可以嵌套使用,方法如下: curl -XGET 10.4.44.19:9200/test/test/_search?pretty -d ' ...

  8. .NET Core第三方开源Web框架YOYOFx

    YOYOFx框架 YOYOFx是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台. 本着学习的态度,造了这个轮子,也是为了更好的了解各个框架的原理和有点,还希望可 ...

  9. Java - 容器详解

    一.ArrayList 长度可变数组,类似于c++ STL中的vector. 元素以线性方式连续存储,内部允许存放重复元素. 允许对元素进行随机的快速访问,但是向ArrayList中插入和删除元素的速 ...

  10. Nancy 学习-身份认证(Basic Authentication) 继续跨平台

    开源 示例代码:https://github.com/linezero/NancyDemo 前面讲解Nancy的进阶部分,现在来学习Nancy 的身份认证. 本篇主要讲解Basic Authentic ...