基本结构

text-shadow: 30px 23px 31px #;/* 文字阴影： 水平位移 垂直位移  模糊程度  阴影颜色*/

凹凸文字

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body {

            background-color: #666;

        }

        p {

            text-align: center;

            color: #666;

            margin: 100px auto;

            font-size: 120px;

        }

        p:nth-child(1) {

            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;

        }

        p:nth-child(2) {

            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

        }

    </style>

</head>

<body>

<p>天苍苍野茫茫</p>

<p>风吹草低见牛羊</p>

</body>

</html>

html5——文本阴影的更多相关文章

  1. 文本溢出text-overflow和文本阴影text-shadow

    前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...

  2. Popline：帅气的浮动 HTML5 文本编辑器工具栏

    Popline 是一个基于 HTML5 实现的富文本编辑器工具栏,设计灵感来自 PopClip ,相比传统的文本编辑器工具,Popline 能够浮动在编辑的文本周围,操作起来十分方便. 您可能感兴趣的 ...

  3. CSS3 一、文本阴影text-shadow属性

    文本阴影text-shadow属性特效: 1.右下角阴影,左下角阴影,左上角阴影,右上角阴影 <!DOCTYPE html> <html lang="en"> ...

  4. html5文本框提示文字属性为placeholder

    html5文本框提示文字属性为placeholder 例子:  <textarea id="comment" class="commentCont"  n ...

  5. 文本阴影text-shadow

    文本阴影text-shadow text-shadow可以用来设置文本的阴影效果. 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示 ...

  6. HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...

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

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

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

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

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

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

随机推荐

  1. Ubuntu 16.04开机进入命令行（tty1）+分辨率调节+字体颜色设置+中文乱码解决（解决虚拟终端Ctrl+Alt+F1分辨率太大）

    一.开机进入命令行模式(tty1) sudo vim /etc/default/grub 把GRUB_CMDLINE_LINUX_DEFAULT=”quiet splash”改成GRUB_CMDLIN ...

  2. 微信最新开源的PhxSQL

    在编者看到“[重磅]微信开源PhxSQL:高可用.强一致的MySQL集群”时,由衷赞叹,这等造福广大DBA及运维同仁的事情,真心赞.腾讯及微信的开放,真的不是说说而已. 本文由资深DB从业者撰写,相信 ...

  3. react 单元测试 (jest+enzyme)

    为什么要做单元测试 作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了. 不过最近开发了一个比较复杂的项目,让我感觉一旦项目大了.复杂了,而且还是多 ...

  4. fast recovery area

    First of all, the version of my enviroment is Oracle 11.0.2.3. The fast recovery area used to be cal ...

  5. 改动grub默认启动顺序

    grub如今有两个版本号,一个grub,一个grub2,两个版本号的操作不太一样. 装centos的朋友非常有可能是grub.我电脑装的是ubuntu14.04,为grub2.我演示grub2的过程. ...

  6. php 把一个数组分成有n个元素的二维数组的算法

    一.第一种解法 <?php //把一个数组分成几个数组 //$arr 是数组 //$num 是数组的个数 function partition($arr,$num){ //数组的个数 $list ...

  7. oop_day06_抽象类、接口_20150814

    oop_day06_抽象类.接口_20150814 1.static final常量: 1)必须声明同一时候初始化.不能改动,类名点来訪问 2)常量名建议全部字母都大写 3)编译器编译时会直接替换为详 ...

  8. 分布式缓存Redis应用场景解析

    Redis的应用场景非常广泛.虽然Redis是一个key-value的内存数据库,但在实际场景中,Redis经常被作为缓存来使用,如面对数据高并发的读写.海量数据的读写等. 举个例子,A网站首页一天有 ...

  9. SPOJ 962 Intergalactic Map (网络最大流)

    http://www.spoj.com/problems/IM/ 962. Intergalactic Map Problem code: IM Jedi knights, Qui-Gon Jinn ...

  10. How to use eclipse quickly

    --> // TODO Quickly find outstanding event 快速查找未完成事件        eg: // TODO Robin   --> Templates  ...