欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

倒影、阴影和文字特效 (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>
倒影、阴影和文字特效 (reflect、shadow、text-shadow)



备注:欢迎加入web前端求职招聘qq群:668352707

相关标签: 特效