13.HTML背景、背景渐变、盒子阴影

背景属性

属性	说明	示例
background-color	设置元素的背景颜色	background-color:#FFAAAA;
background-image	设置元素的背景图片	background-image:url(图片路径);
background-repeat	设置元素的背景图片重复方式	background-repeat:repeat; repeat(默认值，纵向横向平铺) no-repeat(背景图像不平铺) repeat-x(只在水平方向上平铺) repeat-y(只在垂直方向平铺)
background-position	设置元素的背景图片位置	传入两个参数 1.关键字： 水平：left、center、right 垂直：top、center、bottom 2.百分比 水平：0%左~100%右 垂直：0%上~100%下 3.像素值
background-size	设置元素的背景图片大小	传入两个参数，宽和高
background	复合属性，用于设置元素的背景效果	懒得一个一个对了，飞一个链接

---

背景的渐变

        因为没讲，完了自己觉得没啥用。总结应该会有很多疏漏，不利于复盘。

        所以也飞一个链接吧。

        更新，考试用到了背景渐变的效果。

        但没有链接内讲的细致，代码用法放在这：

background: linear-gradient(90deg,pink,#eee);

background: linear-gradient(角度数deg,颜色1,颜色2);

 

---

盒子阴影

        通常我们吧div当做网页布局的容器，也称为盒子。盒子阴影指的就是div产生的阴影。

        属性：box-shadow:h-shadow v-shadow blur spread color;

参数	说明
h-shadow	必须，阴影的水平距离
v-shadow	必须，阴影的垂直距离
blur	可选，阴影模糊半径
spread	可选，阴影大小
color	可选，阴影颜色