背景图片 background-image
url引入图片地址
展示特点：由上到下，由左到右依次排列
背景图大小 background-size
background-size：宽 高；（相比这个最优）
background-size：cover； 图片展示不全
background-size：contain； 图片平铺
背景平铺 background-repeat
background-repeat：repeat-x; 水平方向平铺
background-repeat：repeat-y; 垂直方向平铺
background-repeat：no-repeat；不平铺（常用）
--------------------------------------以下为不常用---------------------------------
背景图像相对位置 background-origin
background-origin:padding-box; 从padding开始处的相对位置
设置背景图像的起始位置 background-position
background-position:center;
背景图剪切 background-clip
content-box 背景绘制在内容方框内（剪切成内容方框）
背景图复合属性
background：url color image position/size repeat origin clip;
外轮廓 outline(了解)
外边框圆角 border-radius
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ? ? .box1{ ? ? ? ? width: 200px; ? ? ? ? height: 300px; ? ? ? ? border: 2px solid rgb(148, 208, 59); ? ? ? ? border-radius: 20px; ? ? ? ? /* border-radius: 10%; */ ? ? } </style> </head> <body> <div class="box1"></div> </body> </html>盒子阴影 box-shaow
四个值时 box-shaow：水平方向(正值向右) 垂直方向(正值向下) 模糊值 阴影颜色（默认黑色）；
五个值时 box-shaow：水平方向 垂直方向 模糊值 外延值 阴影颜色（默认黑色）；
六个值时 box-shaow：水平方向 垂直方向 模糊值 外延值 阴影颜色（默认黑色） 内延值；
resize 调整盒子的大小（了解）
径性渐变 radial-gradient
调整为圆形 background-image: radial-gradient(red, yellow, green);
圆心从左上角向四周扩散 background-image: radial-gradient(at left top, red, yellow, green);
background-image: radial-gradient(at 水平(50px) 垂直（100px）, red, yellow, green);
调整为正圆 background-image: radial-gradient(100px，100px, red, yellow, green);
第一个值代表x轴的半径，第二个值代表y轴的半径 background-image: radial-gradient(red 50px, yellow 100px, green 50px);
线性渐变 linear-gradient
默认从上到下渐变 background-image: linear-gradient(red, yellow, green);
通过to 方位词进行线性渐变 background-image: linear-gradient(to bottom left, red, yellow, green);