做这样的CSS文字阴影效果,该怎么做?

发布网友发布时间：2022-04-21 17:36

共2个回答

热心网友时间：2022-04-06 12:03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字阴影</title>
<style>
div{
  background-color:#EBEBEB;
  width:500px;
  height:100px;
  line-height:100px;
  color:#E3E1E2;
  font-size:40px;
  font-weight:bold;
  font-family:"Arial Black", Gadget, sans-serif;
  text-shadow:0 1px 1px rgba(255,255,255,1),
     0 -1px 1px rgba(0,0,0,.3);
}
</style>
</head>

<body>
<div>This is heading</div>
</body>
</html>

效果图：

大概就是这样子的，你再调一调就能和你的图片一样了，css3文字阴影效果只有支持css3的浏览器才能显示，比如chrome、Firefox等，IE9以下不支持。

热心网友时间：2022-04-06 13:21

据我所知道的，虽然有对象盒子阴影和文字阴影，但是却无法做到你发的这张图的效果

div{box-shadow:0 0 1px #000 inset;}

代表边框间距靠左0 靠上0 和1px阴影范围阴影颜色为黑色（#000），有inset 代表框内阴影，不带inset 代表框外阴影。

div{text-shadow:5px 2px 6px #000;}

设置div盒子里文字阴影效果距离左5px和距离上2px开始显示阴影效果，同时阴影大小范围为6px，阴影颜色为黑色（#000）。

你所发图上的效果用脚本能不能做我不清楚，也许某些字体能做成这样的效果，但是css是做不了的，最好的方法还是在ps直接处理好效果后切成图片

追问嗯,我已经考虑用ps弄图片了,不过PS不怎么会用,自己再鼓捣鼓捣吧,谢谢了

全部栏目

做这样的CSS文字阴影效果,该怎么做?