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 ...
随机推荐
- commons-pool2
转载请注明源出处:http://www.cnblogs.com/lighten/p/7375611.html 1.前言 本章介绍一下常用基础Jar包commons-pools2,最近使用到了thrif ...
- java多线程_01_线程的基本概念
线程:一个程序里边不同的执行路径 例子程序:这个例子程序是一条执行路径.这个程序只有一个分支,就是main方法,叫主线程 public static void main(String[] args) ...
- Disconf 学习系列之Disconf 的主要目标
不多说,直接上干货! 部署极其简单:同一个上线包,无须改动配置,即可在 多个环境中(RD/QA/PRODUCTION) 上线: 部署动态化:更改配置,无需重新打包或重启,即可 实时生效: 统一管理:提 ...
- win10上走网络打印机(不需找驱动包,会自动)
不多说,直接上干货! 之前是 现在是 结束 欢迎大家,加入我的微信公众号:大数据躺过的坑 人工智能躺过的坑 同时,大家可以关注我的个人博客: http://www.cn ...
- win10系统自带的浏览器ME如何将网页转成PDF
不多说,直接上干货! 很多用户都已经开始玩上win10了,补充玩玩一些技巧,当作小灶. 不多废话,在windows 10网页是可以保存为pdf格式.具体如下: 欢迎大家,加入我的微信公众号:大数据躺过 ...
- ActiveMQ消息持久化到Mysql数据库
1.把连接MySQL数据库的jar文件,放到ActiveMQ的lib目录下 2.修改ActiveMQ的conf目录下的activemq.xml文件,修改数据持久化的方式2.1 修改原来的kahadb的 ...
- 在Ubuntu16.04上使用Autofs
在Solaris上,autofs是默认安装的,可以通过/net/<NFS server>很方便地访问远程的共享目录.但在Linux上(例如Fedora或者Ubuntu),使用autofs则 ...
- pthread和semaphore的简单应用以及四个典型的多线程问题
pthread和semaphore的简单应用以及四个典型的多线程问题 pthread常用函数简单介绍 创建线程 int pthread_create(pthread_t * thread, pt ...
- ubuntu新建用户不能使用ll等指令,显示出来的信息没有颜色区分的解决方案
ubuntu利用 useradd -m test -g admin 指令,创建用户test及其工作目录.但是登陆后,会出现不能使用很多指令“比如:ll.显示的信息没有颜色”等等此时 查看该用户的 ...
- Maven可以提交到官方公共仓库maven.org
参考http://central.sonatype.org/pages/ossrh-guide.html这个网址的操作,即可提交到maven.org. 这里有具体的实践方法:http://blog.c ...