版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)
test1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>
</head>
<body>
<p>文本阴影:text-shadow</p>
</body>
</html>
test2
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: red;
text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
}
Test3
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: red;
border: solid 1px red;
text-shadow: 0.5em 0.5em 0.1em #600, -1em 1em 0.1em #060, 0.8em -0.8em 0.1em #006;
}
test4
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: red;
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
}
test5
扫描二维码关注公众号,回复: 6543458 查看本文章
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: -1px -1px white, 1px 1px #333;
}
test6
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: 1px 1px white,
-1px -1px #333;
}
test7
p {
text-align: center;
padding:24px;
margin:0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background:#CCC;
text-shadow: -1px 0 black,
0 1px black,
1px 0 black,
0 -1px black;
}
test8
p {
text-align: center;
padding:24px;
margin:0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background:#CCC;
text-shadow: 0 0 0.2em #F87,
0 0 0.2em #F87;
}
有没有喜欢的哪一种呢