倒影、阴影和文字特效 (reflect、shadow、text-shadow)

2021-06-24 281 阅读1分钟

<!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>