一秒学会CSS阴影效果
主要的作用是可以让页面中的文字和元素具有立体的效果,从而被突出出来。
语法:
-
text-shadow :添加文本阴影
文字阴影效果
<style>
h1 {text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>文字阴影效果!</h1>
</body>
</html>
为文字添加颜色
<style>
h1 {text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>文字阴影效果!</h1>
</body>
</html>
为文字添加模糊影效果
<style>
h1 {text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>文字阴影效果!</h1>
</body>
</html>
带有黑色阴影的白色文本
<style>
h1 {color: white;text-shadow: 2px 2px 4px red;
}
</style>
</head>
<body>
<h1>文字阴影效果!</h1>
</body>
</html>
红色的霓虹发光阴影
<style>
h1 {text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body><h1>文字阴影效果!</h1></body>
</html>