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

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. Vue的实时时间转换Demo

    Vue的实时时间转换Demo time.html: <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. Springboot+ajax传输json数组以及单条数据的方法

    Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: 下面是相关的代码: pom.xml: <?xml v ...

  3. Android_ActionBar

    ActionBar actionBar = getActionBar(); actionBar.setDisplayHomeAsUpEnabled(true);//在activity title栏的左 ...

  4. centos下kubernetes+flannel部署（旧）

    更合理的部署方式参见<Centos下Kubernetes+Flannel部署(新)> 一.准备工作 1. 三台centos主机 k8s(即kubernetes,下同)master: 10. ...

  5. Hive和SparkSQL： 基于 Hadoop 的数据仓库工具

    Hive: 基于 Hadoop 的数据仓库工具 前言 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供完整的 SQL 查询功能,将类 SQL 语句转 ...

  6. lucene基本原理

    1.术语 lucene 在存储它的全文索引结构时,是有层次结构的,这涉及到5个层次:索引(Index):段(Segment):文档(Document):域(Field):词(Term),他们的关系如下 ...

  7. win10装系统--笔记

    U盘安装WIN10时显示 windows无法安装到这个磁盘 选中的磁盘采用GPT分区形式 一.原因分析 win8/win10系统均添加快速启动功能,预装的win8/win10电脑默认都是UEFI引导和 ...

  8. 1000. A-B

    1000. A-B -----> http://soj.me/1000 Constraints Time Limit: 1 secs, Memory Limit: 32 MB Descripti ...

  9. WCF异常信息

    1.服务“CJ.Demo.Conso.WcfService.EmployeeMngService”有零个应用程序(非基础结构)终结点.这可能是因为未找到应用程序的配置文件,或者在配置文件中未找到与服务 ...

  10. Angular的第一个组件

    创建组件 在vscode的命令窗口输入: ng generate component login --inline-template --inline-style 或者简写 ng g c login ...