css3新属性text-shadow

最新推荐文章于 2024-03-22 10:31:32 发布

前端是工作也是生活

最新推荐文章于 2024-03-22 10:31:32 发布

阅读量896

点赞数

分类专栏： css3 web设计

本文链接：https://blog.csdn.net/u010634899/article/details/9072881

版权

web设计同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css3

4 篇文章 0 订阅

订阅专栏

看看这两行字有木有立体的效果：
个性菜单
鼠标经过之前
鼠标经过时：
每天学习一点点
上代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
	background:#EFEFEF;
}
p.first {
	font-size:48px;
	color: #D1D1D1;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow: -1px -1px #333,
	            1px 1px #FFF;
}
p.second {
	font-size:48px;
	color: #D1D1D1;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow: -1px -1px #FFF,
	             1px 1px #333;
}
ul {
	position: relative;
}
li {
	list-style: none;
	line-height:30px;
	background:#000;
	height: 30px;
	width:100px; margin:0;
	display:block;
	float:left;
}
a { display: inline-block;
    color:#FFF;
    font-family:"微软雅黑";
	text-decoration:none;
	height: 30px;
	width:100px;
	text-align: center;
	color: #FFF;
	background: #F00;
	font-size: 15px;
	transition: all 0.25s ease-in
}
a:hover {
	text-decoration:none;
	transform: matrix(1, 0.2, 0, 1, 0, 0);
	-moz-transform: matrix(1, 0.2, 0, 1, 0, 0);
	-ms-transform: matrix(1, 0.2, 0, 1, 0, 0);
	-o-transform: matrix(1, 0.2, 0, 1, 0, 0);
	-webkit-transform: matrix(1, 0.2, 0, 1, 0, 0);
	background: #DFDFDF;
	color:#000;
}
-->
</style>
</head>

<body>
<p class="first">Text shadow</p>
<p class="second">Text shadow</p>
<br />
<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">产品介绍</a></li>
  <li><a href="#">技术支持</a></li>
  <li><a href="#">联系我们</a></li>
</ul>
</body>
</html>