CSS3文本阴影text-shadow属性详解

2019-10-26 17:19:09

字体：大中小

来源：转载

供稿：网友

文本阴影text-shadow属性特效：

1.右下角阴影，左下角阴影，左上角阴影，右上角阴影

<!DOCTYPE html> <html lang="en">

<title>text-shadow</title> <style>

p{ text-align:center;

margin:0; font-family: helvetica,arial,sans-serif;

color:#999; font-size:80px;

font-weight:bold; text-shadow:10px 10px #333;

} </style>

</head> <body>

<p>Text Shadow</p> </body>

</html>

文字效果为：

如果将text-shadow改成：text-shadow:-10px 10px #333 ，就将出现左下角阴影

将text-shadow改成：text-shadow:-10px -10px #333 , 就将出现左上角阴影

将text-shadow改成：text-shadow: 10px -10px #333 , 就将出现右上角阴影

2. 使用text-shadow设置立体文字效果

上一篇：HTML基础总结推荐(标题)

下一篇：html页面公共样式(推荐)

<!DOCTYPE html> <html lang="en">

<title>text-shadow</title> <style>

p{ text-align:center;

margin:0; font-family: helvetica,arial,sans-serif;

color:#999; font-size:80px;

font-weight:bold; text-shadow:-1px -1px #fff,

1px 1px #333; }

</style> </head>

<body> <p>Text Shadow</p>

</body> </html>

发表评论

共有条评论

用户名:	密码:
验证码:	匿名发表

学习交流

电脑开不了机的原因和解决办法

电脑开不了机的原因和解决办法...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注