CSS 实例之文字的凸起与凹陷
一些页面会有一些凹凸文字效果，这个主要是设置背景+文字阴影来达成这个效果的。文字阴影使用方法如下：
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 实例之文字的凸起与凹陷的更多相关文章
- CSS实例
CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...
- CSS：CSS 实例
ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...
- CSS文本与文字
-255之间 14.2 CSS中的文字属性 属性名称 属性值 说明 font-style norma ...
- LESS CSS 实例
值得参考的 10 个 LESS CSS 实例 2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...
- 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 18—Photo OCR 应用实例:图片文字识别
Lecture 18—Photo OCR 应用实例:图片文字识别 18.1 问题描述和流程图 Problem Description and Pipeline 图像文字识别需要如下步骤: 1.文字侦测 ...
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- CSS实例 display display 边距
CSS学习大纲 在标签上设置style属性: background-color:#2459a2 ; height:48px ; 编写CSS样式: 1.标签的style属性 2.写在head里面,sty ...
- css: transform导致文字显示模糊
css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...
- CSS实例：鼠标滑过超级链接文字时改变背景颜色
先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...
随机推荐
- windows 安装openssl
参考文章:http://www.cnblogs.com/tangxin-blog/p/5724071.html 准备条件: 1.VS2012 (携带c++) 2.下载openssl 源码 3.安装Pe ...
- kafka 消费者offset记录位置和方式
我们大家都知道,kafka消费者在会保存其消费的进度,也就是offset,存储的位置根据选用的kafka api不同而不同. 首先来说说消费者如果是根据javaapi来消费,也就是[kafka.jav ...
- 使用seek（）方法报错：“io.UnsupportedOperation: can't do nonzero cur-relative seeks”错误的原因
在使用seek()函数时,有时候会报错为 “io.UnsupportedOperation: can't do nonzero cur-relative seeks”,代码如下: >>& ...
- visual studio 2008 快捷键
Ctrl+m+Crtr+o折叠所有大纲Ctrl+M+Crtr+P: 停止大纲显示Ctrl+K+Crtr+C: 注释选定内容Ctrl+K+Crtr+U: 取消选定注释内容Ctrl+J : 列出成员 智能 ...
- Python -- 数据库连接
1.连接MySQL(x64系统装不上x32版本) MySQL现在都不支持Python3 import MySQLdb con = MySQLdb.connect(host='127.0.0.1', u ...
- 阿里云使用镜像安装freepbx
安装freepbx真的是历经坎坷,不过也收获了一些东西.freepbx可以通过源码安装也可以通过镜像安装.源码安装我们会在另外一篇文章中讲到,这里我们讲到的是镜像安装,在本地进行镜像安装还是比较简单的 ...
- java的if语句，少于一行可以省略大括号
我们认识的 if 语句,大概是这样的: if(条件){ 语句1; }else{ 语句2; } 如果要执行的语句少于1行,大括号是可以省略的 可以让程序更简洁和美观 if(条件){ 语句1; 语句2; ...
- Hadoop MapReduce流程及容错
shuffle流程 输入分片(input split):在进行map计算之前,mapreduce会根据输入文件计算输入分片(input split),每个输入分片(input split)针对一个ma ...
- Microsoft.AspNet.Identity 的简单使用
要完成一个简单的注册,登陆,至少需要实现Identity中的3个接口 IUser IUserStore<TUser> : IDisposable where TUser : IUser I ...
- 初学nodejs之安装Express中遇到的问题： error: option `-v, --view <engine>' argument missing
Windows安装下载nodejs地址:http://nodejs.org/download/ node -v 查看安装版本,输出版本即安装成功 之前学习了nodejs的基础,今天安装Express框 ...