CSS3文本阴影 text-shadow
HTML5学堂:CSS3文本阴影是给文本添加阴影效果,而在CSS3文本阴影在CSS以及存在了,只是CSS2.1的时候不用了,但是在CSS3又重新使用了,这是因为前端开发者对文本阴影开始重视了,使用更加广泛了!而本章对CSS3文本阴影的讲解希望对大家有帮助!谢谢~~
CSS3阴影的种类
可以分文字阴影和盒模型阴影。在最早做网页的时候,阴影效果是没办法实现的,只能用图片代替,现在有了CSS3的阴影属性box-shadow以及text-shadow来实现阴影。这样我们可以不需要图片也可以实现阴影效果了,一方面能减少代码以及图片的大小和数量,另一方面我们也能减少对图片的请求。还有一点,在于阴影能够很好的处理我们当前移动端上的一些问题。今天我们就来一起先看看文本阴影
文本阴影
text-shadow基本语法
text-shadow:none|shadow[,shadow]*
shadow=length{2,3}&&color?
默认值:none
语法分析:
none:无阴影
第1个长度值:阴影水平偏移值。可为负值
第2个长度值:阴影垂直偏移值。可为负值
第3个长度值:可选,阴影模糊值。不允许负值
color:设置对象的阴影的颜色。可以使用16进制颜色值,也可以使用英文单词,还可以采用rgba的表示法。
语法符号含义:
“[]”代表“可选”
“|”代表“或”
“{}”里的数字代表属性值的数量范围
“?”代表“一次”
“*”表示可出现多次
CSS3文本阴影 应用
我们可以通过文本阴影实现“外发光”“火焰”“内陷”“立体”“镂空”等各种效果。接下来我们就来举几个例子,实战一下~
结构代码:
<div class="h5course">欢迎沟通交流~HTML5学堂</div>
描边:
样式代码:
html {
background: #000;
}
.h5course {
width: 400px;
height: 200px;
text-shadow: 1px 1px 0 #f96,
-1px -1px 0 #f96;
background: #ccc;
line-height: 200px;
text-align: center;
font-size: 30px;
font-family: "微软雅黑";
}
看效果图:
描边效果有时还是可以试用达到一种特殊的描边效果,其主要运用两个阴影,第一个向左上投影,而第二向右下投影,还需注意,制作描边的阴影效果我们不使用模糊值。
外发光
样式代码:
html {
background: #000;
}
.h5course {
width: 500px;
padding: 30px;
background: #333;
color: #000;
text-shadow: 0 0 20px #fff,
0 0 50px #00f;
font-size: 40px;
font-weight: bold;
font-family: "微软雅黑";
}
辉光效果,我们设置比较大的模糊半径来增加其辉光效果,你可以改变不同的模糊半径值来达到不同的效果,当然你也可以同时增加几个不同的半径值,创造多种不同的阴影效果。
内陷文本/文本内阴影特效
样式代码:
.h5course {
width: 500px;
padding: 30px;
background: #333;
text-shadow: 0 1px 1px #fff;
color: #000;
font-size: 40px;
font-weight: bold;
font-family: "微软雅黑";
}
查看效果:
内阴影的效果主要是运用文字颜色与背景颜色之间产生内陷的感觉,这里一定要注意。模糊度一定要设置为0,否则没有质感了。同样我们可以改变不同的投光角度,从而制作不同效果。大家可以试试~
立体文字
样式代码:
.h5course {
width: 500px;
padding: 30px;
background: #333;
color: #000;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),
2px 2px rgba(197, 223, 248,0.8),
3px 3px rgba(197, 223, 248,0.8),
4px 4px rgba(197, 223, 248,0.8);
font-size: 40px;
font-weight: bold;
font-family: "微软雅黑";
}
查看效果:
实现立体文字的效果,需要使用多重阴影,向着同一个方向,进行叠加。需要注意的是,不同阴影之间,使用逗号分隔。另外,对于阴影,不建议采用模糊值,如果设置了模糊值,会导致立体感不足。
兼容性:
IE8以及IE8以下版本浏览器不支持
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Laravel事件监听器用法实例分析
- iOS 性能优化实践:头条抖音如何实现 OOM 崩溃率下降50%+
- PHP join()函数用法与实例讲解
- Laravel框架实现的使用smtp发送邮件功能示例
- 浅谈PHP无限极分类原理
- 浅谈PHP各环境下的伪静态配置
- 浅谈php的TS和NTS的区别
- 详解用Python调用百度地图正/逆地理编码API
- python如何使用代码运行助手
- keras topN显示,自编写代码案例
- PHP实现的杨辉三角求解算法分析
- PHP levenshtein()函数用法讲解
- PHP DB 数据库连接类定义与用法示例
- PHP添加PNG图片背景透明水印操作类定义与用法示例
- 浅谈PHPANALYSIS提取关键字