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 ...
随机推荐
- Java之IO(十)Reader和Writer
转载请注明源出处:http://www.cnblogs.com/lighten/p/7071733.html 1.前言 之前的章节已经将Java8的io包中的字节流介绍完毕了.本章开始介绍Java的I ...
- Linux下安装jdk8步骤详述（转载）
Linux下安装jdk8步骤详述 原文地址:http://www.cnblogs.com/shihaiming/p/5809553.html 作为Java开发人员,在Linux下安装一些开发工具是必备 ...
- 极光推送android sdk集成步骤
推送,用极光,大家都说好,哈哈. 进入正题: 1.确认android studio的 Project 根目录的主 gradle 中配置了jcenter支持.(基本上现在都已经支持了,循例说一下) , ...
- JavaScript -- 猜数、遍历
----- 004-猜数.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv="Co ...
- php的explode()和split()的区别
都是分割,区别就是,split要用转移字符: 1. $test = end(explode('.', 'abc.txt')); echo $test;//output txt 2. ...
- windows端口查看及进程查找
1. 使用netstat查看端口 netstat -ano 2. 查找特定端口号: netstat -aon|findstr "port" 3. 查找该端口的进程 tasklist ...
- centos6.5下yum安装mysql5.5
第一步就是看linu是否安装了mysql,经过rpm -qa|grep mysql查看到centos下安装了mysql5.1,那就开始卸载咯 2 接下来就是卸载mysql5.1了,命令:rpm -e ...
- Deep Q-Network 学习笔记（六）—— 改进④：dueling dqn
这篇同样是完全没看懂 Orz,这里只做实现记录.. 要改动的地方只是在神经网络的最后一层做下调整即可. def create(self): neuro_layer_1 = 3 w_init = tf. ...
- Xcode8 log问题
去除一堆log的方法: Xcode8--->Product---- Edit Scheme... -> Run -> Arguments, 在Environment Variable ...
- 鼠标键盘失灵对策（Windows8.1）
Win8.1虽然比Windows Server 2008R2开关机速度快好多.可惜用了一年后发现Win8.1 大bug. 鼠标键盘老是失灵... 对应方案: 1. 将鼠标键盘的USB插头更换位置,比如 ...