文字阴影，图片阴影

text-shadow: h-shadow v-shadow blur color;

注意：text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊的距离
color	可选。阴影的颜色

<style>
	/* 文字阴影 */
        .div_1{
            font-size: 48px;
            text-shadow: 5px 5px 10px red;
        }
</style>
<div class="div_1">css</div>

2.用伪类给图片加阴影

<style>
	.div_2{
            width: 500px;
            height: 400px;
            /* box-shadow: 30px 10px 5px rgba(0,0,0, 0.332) inset,7px 5px 5px rgba(0, 0,0, 0.5); */
            position: relative;
        }
        .div_2 img{
            width: 500px;
            height: 400px;
        }
        .div_2::after{
            content: '';
            width: 450px;
            height: 50px;
            /* background-color: red; */
            position: absolute;
            top: 350px;
            left: 5%;
            z-index: -1;
            box-shadow: 0px 15px 5px rgba(0,0,0, 0.3);
        }
</style>
<div class="div_2">
        <img src="img/i.jpg" alt="">
</div>

（1）white-space属性指定元素内的空白怎样处理。

white-space: nowrap;

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承 white-space 属性的值

（2）text-overflow：ellipsis

text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。

语法：

text-overflow: clip|ellipsis|string|initial|inherit;

值	描述
clip	剪切文本
ellipsis	显示省略符号 ... 来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本
initial	设置为属性默认值
inherit	从父元素继承该属性值