CSS3笔记:text-shadow属性给文字添加阴影效果

文本阴影text-shadow

语法

text-shadow: X-Offset Y-Offset blur color;

X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;

Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

Color:是指阴影的颜色,其可以使用rgba色。

比如,我们可以用下面代码实现设置阴影效果。

text-shadow: 0 1px 1px #fff

演示代码

<!DOCTYPE html>
<html>
<head>
	<title>随便看看|CSS3学习笔记之:text-shadow属性给文字添加阴影效果</title>
	<meta charset="utf-8">
	<style type="text/css">
		.element-text-shadow {
			text-shadow: 2px 2px 6px #FF0000;
	</style>
</head>
<body>
	<h3 class="element-text-shadow">随便看看|CSS3学习笔记之:text-shadow属性给文字添加阴影效果</h3>
</body>
</html>

效果演示一:

text-shadow: 2px 2px 6px #FF0000;

随便看看|CSS3学习笔记:text-shadow属性给文字添加阴影效果

效果演示二:

text-shadow: 0 1px 0 #FFFFFF, 0 -1px 3px #BEBEBE;

随便看看|CSS3学习笔记:text-shadow属性给文字添加阴影效果

其他CSS演示

效果演示三:

color: transparent;-webkit-text-stroke: 1px red;font-weight: bold;

随便看看|CSS3学习笔记:text-shadow属性给文字添加阴影效果

效果演示四:

background: DodgerBlue   !important;
border-radius: 6px 6px 6px 6px !important;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-size: 17px;
文章链接:https://www.sbkko.com/1.html
文章标题:CSS3笔记:text-shadow属性给文字添加阴影效果
文章版权:SBKKO 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

给TA打赏
共{{data.count}}人
人已打赏
WP文章

基于LNMP一键安装包的wordpress无法加载主题和编辑的问题

2017-11-3 17:34:00

WP文章文章

让WordPress媒体库支持外链图片保存的插件

2017-11-12 14:22:16

2 条回复 A文章作者 M管理员
  1. 可爱的昵称22

    在最平常的事情中都可以显示出一个人人格的伟大来!

  2. 断天痕

    一切为了积分

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索