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以下版本浏览器不支持

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

OpenGL ES实践教程(四)VR全景视频播放

教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践...

3554
来自专栏编程之旅

iOS开发——影响图形性能的因素以及检测方法

我想各位攻城狮们肯定听过一句话:“过早的优化是万恶之源”。若是你有着丰富的项目经验,一定会对这句话有着自己的体会,而若是编程新手,那么,请牢记这句话。在一个项目...

602
来自专栏拂晓风起

【Fanvas技术解密】HTML5 canvas实现脏区重绘

1042
来自专栏腾讯Bugly的专栏

Android之实现妙趣横生的粘连布局

1概述 在手机QQ中,有一个功能叫“一键下班”,无论界面有多少信息,只要你不想看,就可以手指一滑,将他们全部消灭。据说这个功能专为红点恐惧症、信息阅读强迫症以及...

3253
来自专栏编程之旅

高性能设置圆角,告别离屏渲染

今天来写一个老生常谈的话题,也是一个面试的高频问题,我也在面试时不止一次被问到过这个问题——如何高性能的设置圆角。就用他作为2017年春节上班之后的第一篇文章。

611
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法

1163
来自专栏陈满iOS

iOS图形处理概论:OpenGL ES,Metal,Core Graphics,Core Image,GPUImage,Scene Kit (3D) ,Sprite Kit (2D),OpenCV

对于刚接触iOS图形相关框架的小白,有一些图形框架在字面上和功能上非常容易混淆。这里旨在总结一下各种框架,区分它们的概念和功能,以作日后进一步细分学习的指引。因...

732
来自专栏Crossin的编程教室

【编程课堂】海龟作图

0、前言 turtle 是 python 内置的一个比较有趣味的模块,俗称 海龟作图,它是基于 tkinter 模块打造,提供一些简单的绘图工具,海龟作图最初...

3366
来自专栏進无尽的文章

UI篇-Layer几个关键点补充

强大的UIView是基于 CALayer实现的,它的重要性不言而喻,相信大家也都有自己的研究和理解,今天这片文章里的内容是几个关键点的补充。

501
来自专栏Fred Liang

移动端 Web 渲染解决方案

秋招 H5 移动端(面向微信)设计师出的落地页的动画层数有30层左右,在通过 bodymovin 导入前端页面中后再加载好素材之后仍有5秒左右黑屏渲染动画 目...

944

扫描关注云+社区