CSS3 box-shadow 实现描边字

如果设计稿中有很多描边字，如果都切成图片将造成大量的图片素材，工作量大，加载速度慢，难维护。

今天才发现 CSS3 box-shadow 是可以实现描边字的，以前遇到描边字都是改成图片…. 现在好了，只怪我才慢知道

附上测试DEMO

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>box-shadow</title>
	<style type="text/css">
	 .aa{
	 	font-size: 60px;
	 	color: #F99;
	 	text-decoration: none;
	 	text-shadow: 1px 0 0 #622E00, -1px 0 0 #622E00, 0 1px 0 #622E00, 0 -1px 0 #622E00;
	 }
	</style>
</head>
<body>
	<a href="#" class="aa">测试描边</a>
</body>
</html>

<!DOCTYPE html>

<head>

<title>box-shadow</title>

.aa{

font-size: 60px;

color: #F99;

text-decoration: none;

text-shadow: 1px 0 0 #622E00, -1px 0 0 #622E00, 0 1px 0 #622E00, 0 -1px 0 #622E00;

}

</style>

</head>

<body>

</body>

</html>

再也不用去弄成图片了

不过box-shadow IE低版本不支持而且还有性能问题，根据需求使用..

GET 新技能

CSS3 box-shadow 实现描边字

发表评论 取消回复

发表评论取消回复