一些页面会有一些凹凸文字效果，这个主要是设置背景+文字阴影来达成这个效果的。文字阴影使用方法如下：

text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色
具体代码如下：
 body {

            background-color: grey;

        }

        div {

            color: grey;

            font-size: 200px;

            font-family: "微软雅黑";

        }

        div:first-child {

            /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色 */

            text-shadow: 1px 1px 2px black, -1px -1px 2px white;

        }

        div:last-child {

            text-shadow: 1px 1px 2px white, -1px -1px 2px black;

        }
<body>

    <div>凸起</div>

    <div>凹陷</div>

</body>

结果如下图所示

将文本上方阴影设为亮色，下方阴影设为暗色则是凸起效果

上方阴影设为暗色，下方阴影设为亮色则是凹陷效果

CSS 实例之文字的凸起与凹陷的更多相关文章

  1. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  2. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  3. CSS文本与文字

    -255之间 14.2 CSS中的文字属性 属性名称                    属性值                       说明 font-style          norma ...

  4. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

  5. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 18—Photo OCR 应用实例:图片文字识别

    Lecture 18—Photo OCR 应用实例:图片文字识别 18.1 问题描述和流程图 Problem Description and Pipeline 图像文字识别需要如下步骤: 1.文字侦测 ...

  6. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

  7. CSS实例 display display 边距

    CSS学习大纲 在标签上设置style属性: background-color:#2459a2 ; height:48px ; 编写CSS样式: 1.标签的style属性 2.写在head里面,sty ...

  8. css: transform导致文字显示模糊

    css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...

  9. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

随机推荐

  1. PreparedStatement插入values

    public interface PreparedStatementextends Statement 表示预编译的 SQL 语句的对象. SQL 语句被预编译并存储在 PreparedStateme ...

  2. 【Java并发编程】：死锁

    当线程需要同时持有多个锁时,有可能产生死锁.考虑如下情形: 线程A当前持有互斥所锁lock1,线程B当前持有互斥锁lock2.接下来,当线程A仍然持有lock1时,它试图获取lock2,因为线程B正持 ...

  3. 【字符串】Reverse Words in a String（两个栈）

    题目: Given an input string, reverse the string word by word. For example,Given s = "the sky is b ...

  4. 【译】Spark调优

    原文地址:http://spark.incubator.apache.org/docs/0.7.3/tuning.html 译文地址:http://www.oschina.net/translate/ ...

  5. redis 安装 与错误解决办法

    redis 安装与安装中遇到的错误 redis 安装 wget http://download.redis.io/releases/redis-4.0.11.tar.gz .tar.gz cd red ...

  6. MySQL的各种join

    常用的是这5个join 首先join = inner join   这里有说明:点击打开链接 这里我就不用表来说明了,例子看这里 简单的说就是 inner join:不以谁为基准,只有符合关系的才会选 ...

  7. Pipenv——最好用的python虚拟环境和包管理工具

    pipenv 是Kenneth Reitz大神的作品,能够有效管理Python多个环境,各种包.过去我们一般用virtualenv搭建虚拟环境,管理python版本,但是跨平台的使用不太一致,且有时候 ...

  8. sqljdbc.jar 和 sqljdbc4.jar

    为了支持向后兼容以及可能的升级方案,JDBC Driver 2.0 在每个安装包中都包括 2 个 JAR 类库:sqljdbc.jar 和 sqljdbc4.jar. JAR 说明 sqljdbc.j ...

  9. golang基础--常量与运算符

    常量与运算符 常量的定义 常量的值在编译时已经确定 常量的定义格式与变量的基本相同 等号的右侧必须是常量或者常量表达式 规范: 常量定义时建议都使用大写,单词之间使用大写 便于包的外部调用 如果只限于 ...

  10. 正则表达式匹配可以更快更简单 (but is slow in Java, Perl, PHP, Python, Ruby, ...)

    source: https://swtch.com/~rsc/regexp/regexp1.html translated by trav, travmymail@gmail.com 引言 下图是两种 ...