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

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. c++面试题中经常被面试官面试的小问题总结（一）（本篇偏向基础知识）

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/10711810.html 1.类中的函数定义后加了一个const代表什么? 代表它将具备以下三个 ...

  2. Linux笔记：vi常用命令

    vi编辑器是所有Unix及Linux系统下标准的编辑器,在很多时候我们都需要使用vi修改服务端配置,vi其实非常强大,只要命令使用熟练的情况下,编辑速度并不亚于现在的图形化编辑器,这里简单地介绍一下它 ...

  3. eclipse中explorer显示方式

    不知道是不是上面的描述.做个记录 project explorer 项目资源管理器 这个要打开代码目录需要再点开java resources 还会出现deployment Descriptor项目工程 ...

  4. MVC与MVVM设计模式理解

    MVC设计模式(View和Model之间不能直接通信) MVC是一种架构模式,M表示Model,V表示视图View,C表示控制器Controller: Model负责存储.定义.操作数据.从网络中获取 ...

  5. Git的gitattributes文件详解

    转自:Git的gitattributes文件详解 Git的gitattributes文件是一个文本文件,文件中的一行定义一个路径的若干个属性. 1. gitattributes文件以行为单位设置一个路 ...

  6. Linux用户信息查询

    1 查询目前已登录的用户信息w 或者 who [@bjzw_11_210 ~]# w :: up days, :, users, load average: 0.03, 0.04, 0.00 USER ...

  7. 编写代码:ATM的登陆界面(用户验证、主菜单的选择) 查询-- 存款-- 取款-- 退出

    #include <stdio.h>#include <windows.h>int main (void){    int password,one,two,money1=10 ...

  8. sqlserver把任意一列放到第一列并顺序排列

    请用一句sql写出将id为1234放到表的第一列,其他紧随其后并以正序排列的查询语句. 答案: select * from table where ID=2union all select * fro ...

  9. Jsp&Servlet入门级项目全程实录第6讲

    惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 1.建立数据表及数据(略) 2.创建student model package com.java1234.model; ...

  10. java SE 入门之输入输出(第四篇)

    在第一篇,八大基本类型的时候,我就介绍了输出,当然,这些输出都是简单的,后续写到流的时候,在细化输入输出. 现在只要求看懂输入输出.输入其实就是接受键盘的输入. public class Hello ...