Android字体描边和阴影,CSS基础：通过文字阴影实现文字的立体感，印刷感，描边和虚化效果...
准备两段一模一样的楷体文本，用来对比效果(有些效果从截图上看可能不是很明显，建议自己在浏览器中试一试)
人生并不仅是一趟冒险之旅，人生也是我们应该花时间去享受的幸福之旅。
你可以同时找到探险和快乐，在那些你爱的人身上，在那些你爱的人跳动的眼神里，在那些你爱的人快乐的脸上。
人生并不仅是一趟冒险之旅，人生也是我们应该花时间去享受的幸福之旅。
你可以同时找到探险和快乐，在那些你爱的人身上，在那些你爱的人跳动的眼神里，在那些你爱的人快乐的脸上。
.text1 {
width: 80%;
margin: 20px auto;
font-size: 18px;
font-family: STKaiti;
}
.text2 {
width: 80%;
margin: 20px auto;
font-size: 18px;
font-family: STKaiti;
}复制代码
立体感
给text2加上1px靠右靠下的文字阴影，使文字具有立体感
.text2 {
width: 80%;
margin: 20px auto;
font-size: 18px;
font-family: STKaiti;
text-shadow: 1px 1px 0 #aaa;
}复制代码
印刷感
将文字阴影的水平和垂直偏移都设为0，只添加1px的阴影模糊距离，同时颜色设置为带透明的阴影，从而模拟出一种油墨浸到纸张上时淡淡晕开来的印刷感(这个效果从截图中看非常不明显，在手机上有不错的效果)。
.text2 {
width: 80%;
margin: 20px auto;
font-size: 18px;
font-family: STKaiti;
text-shadow: 0 0 1px rgba(128, 128, 128, .5);
}复制代码
描边
将text2设置为黑色背景，然后给文字四个方向同时加上1px的白色阴影，就会出现一种文字描了白边的效果
.text2 {
width: 80%;
margin: 20px auto;
font-size: 18px;
font-family: STKaiti;
background: black;
text-shadow: -1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
}复制代码
虚化
在黑色背景下只设置模糊距离，就能出现一种模模糊糊的虚化效果
.text2 {
width: 80%;
margin: 20px auto;
font-size: 18px;
font-family: STKaiti;
background: black;
text-shadow: 0 0 10px #fff;
}复制代码
Android字体描边和阴影,CSS基础：通过文字阴影实现文字的立体感，印刷感，描边和虚化效果...相关推荐
- WEB安全之DIV CSS基础（二）：文字和文本的属性、列表样式和伪类超链接
WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性 文字属性 文本属性 列表样式和伪类超链接 项目符号列举 设置列表项标记 超链接 文字和文本的属性 文字 ...
- html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上
HTML里面有一个标签fieldset,可以实现文字写在边框上,今天项目想实现一个类似效果,并要求自定义边框上文字距离一侧的距离.下面青岛星网跟大家分享下纯CSS的实现方法. 先看下效果 HTML部分 ...
- css基础篇-倒影-阴影
一.倒影 语法 box-reflect:none | <direction> <offset>? <mask-box-image> ? <direction& ...
- html div 阴影,css实现div框阴影
.out { position:relative; background:#bbb; margin:10px auto; width:92px } .in { background:#fff; bor ...
- CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考 黑马程序员pink老师前端入门教程 如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
- CSS基础「六」元素的显示与隐藏
本篇文章为 CSS 基础系列笔记第六篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS基础「五」定位
本篇文章为 CSS 基础系列笔记第五篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
最新文章
- 从传统运维到云运维演进历程之软件定义存储（五）上
- 网站权重增长缓慢，优化技巧是关键！
- c# redis hashid如何设置过期时间_Redis数据库实现原理（划重点）
- js javascript UTF-8 GB2312编码转换
- 使用Spring Security，Thymeleaf和Okta保护Java应用程序的安全
- Upload-Labs(16)
- android 关联源码
- 炼数成金数据分析课程---10、python中如何画图
- 复合线转权属线lisp_三权发证中使用MAPGIS CASS如何应用复合线 简单、快速生成集体土地所有权权属线 -...
- 基于php工程项目管理系统
- 遗传算法原理与matlab,有关路径优化遗传算法原理（结合matlab代码）
- 谢尔宾斯基三角形：Python+turtle
- ETL工具KETTLE常用设计之——单个或批量xml文件解析
- 想要制作出好看的软蜡笔画？来看这份JixiPix Pastello Pro操作指南！
- Centos7系统启动盘的正确安装姿势
- 认知能力训练系统--提升6大认知能力
- 20、斐⽒数列是公元13世纪数学家斐波拉契发明的。即： 1， 2， 3， 5， 8， 13， 21， 34， 55， 89， ……， 输出其前15项。
- 模块化通信原理实验箱QY-JXSY32
- 微信清理内置浏览器缓存
- 由乌龟画一个正方形所想到的