圆角边框、阴影、background

一、圆角边框

语法：border-radius: 100px/50%

属性值越大 弧度越大

利用border-radius属性制作圆形的两个条件

①元素的宽度和高度必须一样（正方形）

②属性值为宽度/高度的一半，或者直接写50%

（长方形无法设置成一个圆）

如果是长方形，想设置成圆角矩形，则Border-radius：属性值设置为高度的一半

属性值
1个值	所有角都变化相同弧度
2个值	左上右下、右上左下（对角线）
3个值	左上、右上左下、右下
4个值	左上、右上、右下、左下

二、盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset

注意：（1）前两个值必须写，写代码时可以只写前两个值，后面不写表示默认

1. 区分blur和spread, blur可以理解为模糊的程度,blur的值越大，越模糊，spread值越大，阴影面积越大
2. 盒子阴影默认是outset,但是不可以写这个单词，否则会造成阴影无效

三、文字阴影

语法：text-shadow: h-shadow v-shadow blur color;

四、补充背景属性

1、backgroung-size属性

属性值	说明
length	设置背景图的宽度和高度，第一个值为宽度，第二个为高度，只设一个值，另一个值默认auto自动。不保持纵横比，会覆盖背景定位区域，图片会全部展示出来（可以理解为等比例放大/缩小）
percentage	和px一样只是单位换成%
cover	图像会保持纵横比，且覆盖背景定位区域，但会出现图像显示不全
contain	会保持纵横比，但不会完全覆盖背景定位区域（自适应，即宽度和高度有一个完全覆盖就可，可能会有部分空白区域）图片会全部展示。

2、background-origin/clip属性

属性值：padding-box/border-box/content-box