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

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. 使用Properties类和ResourceBundle类读取properties文件

    一.介绍: 项目中经常把一些常用的用户名和密码都填写到一个对应的配置文件中,这样每次修改密码或者用户名的时候就可以直接修改这个配置文件了,不用动源码. 这里讲两种方式读取properties文件的方法 ...

  2. (转) centos 7.0 nginx 1.7.9成功安装过程

    centos 7.0根目录 的目录构成 [root@localhost /]# lsbin dev home lib64 mnt proc run srv tmp varboot etc lib me ...

  3. Linux的文件的打包(tar方法)

    Linux的文件的打包(tar方法) tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一 ...

  4. spring boot整合RabbitMQ（Direct模式）

    springboot集成RabbitMQ非常简单,如果只是简单的使用配置非常少,springboot提供了spring-boot-starter-amqp项目对消息各种支持. Direct Excha ...

  5. sql 函数字符串处理

    --Description: 字符处理 --使用: 放到查询分析器里执行就可以了 --示例: select * from dbo.splitstr('12 44 45 50 56 87',' ') o ...

  6. C/C++ -- Gui编程 -- Qt库的使用 -- 构造函数中添加组件

    在构造函数中定义一个标签,设置自动换行和样式表 -----mywidget.cpp----- #include "mywidget.h" #include "ui_myw ...

  7. java 之 异常处理小结

    1 :分类 检查异常(checked,受检) 运行异常(unchecked) 2:捕获异常 try/catch    try/catch/finally   try/finally try{ //受保 ...

  8. java面试③Web部分

    2.2.1 讲一下http get和post请求的区别 get和post请求都是http的请求方式,用户通过不同的http请求方式完成对资源(url)的不同操作,具体点来讲get一般用于获取/查询资源 ...

  9. MVC中分页的实现

    我在 (www.helpqy.com) 中使用了下面的分页技术. 分页可以采用troygoode提供的开源包,其开源网站主页为:https://github.com/TroyGoode/PagedLi ...

  10. [转]VS2013中使用Git建立源代码管理

    本文转自:https://blog.csdn.net/bodybo/article/details/38976549 第一次在VS2013中使用Git,也是第一次使用Git,各种不熟悉.百度各种使用经 ...