CSS3 text shadow字体阴影效果

2020-04-30 14:45:17易采站长站整理

max-width: auto;    
max-height: auto;    
background-color: #f8f8f8;    
padding: 30px 30px 20px 30px;    
color: #666;    
border-radius: 5px    
}    
.All-orange h1 {    
font: normal 32px 微软雅黑,sans-serif;    
padding: 20px 0 20px 40px;    
display: block;    
margin: -30px -30px 10px -30px;    
color: #FFF;    
background-color: #0CF;    
border-radius: 5px;    
text-shadow:5px 2px 6px #000;    
box-shadow: 5px 2px 6px #000;    
}    
.All-orange img {    
float: left    
}    
.All-orange h1 img{    
margin-top: -15px;    
}    
</style>    
</head>    
<body>    
<div class="All-orange" id="all">    
<h1><img src="../img/launcher_icon_.png" />    
悲伤黑白棋    
</h1>    
</div>    
</body>    
</html>   

效果图:

这里写图片描述

浏览器兼容

此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。

这里写图片描述