您当前的位置:首页 > 网站建设笔记 >

使用CSS3的text-shadow制作浮雕文字阴影和多重文字阴影效果

0

我一直觉得text-shadow最适合用来制作浮雕文字。这种效果一般最适合应用在非白色背景的深色文字上,搭配以高亮颜色(如纯白色或类似颜色)的阴影。以下我们来给“网站程序”这四个字添加浮雕效果试试:

.fudiao {
	height: 50px;
	line-height: 50px;
	padding:0 20px;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-size: 1.875em;
	color: #000000;
	font-weight: bold;
	background-color: #cc9900;
	text-shadow: 0 1px 0 rgba(255,255,255,0.75);
}
网站程序

以下试试多重文字阴影:

.duochong {
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-size: 1.875em;
	color: #000000;
	font-weight: bold;
	background-color: #ffffff;
	text-shadow: 0 1px #ffffff,3px 3px 0px #dad7d7;
}
网站程序

建站咨询

咨询热线

微信交流

返回顶部