倒影、阴影和文字特效 (reflect、shadow、text-shadow)
程序员文章站
2022-05-28 21:48:56
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>倒影、阴影和文字特效 (reflect、shadow、text-shadow)</title>
<style type="text/css">
body{margin: 0}
.m-reflect{font-size: 36px;color: green;-webkit-box-reflect:below 0 linear-gradient(transparent,rgba(255,255,255,.3));}
.m-shadow{margin: 50px 0 0; width:300px;height:100px;background-color:#ff9900;box-shadow: 10px 10px 5px #888888;}
.m-text-shadow{text-shadow: 2px 2px 2px green;font-size: 36px}
</style>
</head>
<body>
<div class="m-reflect">徐同保</div>
<div class="m-shadow"></div>
<div class="m-text-shadow">徐同保</div>
</body>
</html>备注：欢迎加入web前端求职招聘qq群：668352707
上一篇： 前端--鼠标跟随特效
下一篇： script标签影响页面显示