css文本阴影

本文阴影的几个属性：
text-shadow
box-shadow
text-overflow
word-wrap
word-break
改变文字盒子的样式，更加具有美观和观赏性！！！ 阴影感觉就让图片 有了立体感！

box-shadow 属性适用于盒子阴影

div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}

阴影也可以选择颜色：

div {
    box-shadow: 10px 10px 5px grey;
}

<style>
h1
{
    text-shadow: 5px 5px 5px #FF0000;
}
</style

指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：这就是文字阴影

这几个属性就是比较基础的属性，我展示一个 我写的效果

<style type="text/css">
		 .div {
		 		  text-shadow: 10px 10px 3px rgba(0, 0, 0, .1),
                5px 5px 3px rgba(255, 0, 255, .1);
                font-size: 100px;
              font-weight: bold;
              font-family: simsun;
              background: url(img/guidao1.jpg) no-repeat center center;
              background-size: cover;
              -webkit-background-clip: text;
               /*background-clip: text;*/
            -webkit-text-fill-color: transparent;
            
            }
			.div::after{
            content:"我喜欢你!"; 
             
            opacity: 0;
            transition: all 2s;
        }
         .div:hover::after {
         	background-position: -300px -300px;
            opacity: 1;
        }

	</style>

<div class="div">春风十里，</div>

把图片当做底色， 值截取文字的那一部分！

因为我加了伪类的所以当你把光标放到文字上 就会显示 后半段