CSS Day9-CSS新样式

9.1 背景相关属性

• 背景图片 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;

9.2 边框相关属性

• 外轮廓 outline(了解)

• 外边框圆角 border-radius

• 盒子阴影 box-shaow

  四个值时 box-shaow：水平方向(正值向右) 垂直方向(正值向下) 模糊值 阴影颜色（默认黑色）；

  五个值时 box-shaow：水平方向 垂直方向 模糊值 外延值 阴影颜色（默认黑色）；

  六个值时 box-shaow：水平方向 垂直方向 模糊值 外延值 阴影颜色（默认黑色） 内延值；

• resize 调整盒子的大小（了解）

9.3 渐变

• 径性渐变 radial-gradient

  1. 调整为圆形 background-image: radial-gradient(red, yellow, green);

  2. 圆心从左上角向四周扩散 background-image: radial-gradient(at left top, red, yellow, green);

  3. background-image: radial-gradient(at 水平(50px) 垂直（100px）, red, yellow, green);

  4. 调整为正圆 background-image: radial-gradient(100px，100px, red, yellow, green);

  5. 第一个值代表x轴的半径，第二个值代表y轴的半径 background-image: radial-gradient(red 50px, yellow 100px, green 50px);

• 线性渐变 linear-gradient

  1. 默认从上到下渐变 background-image: linear-gradient(red, yellow, green);

  2. 通过to 方位词进行线性渐变 background-image: linear-gradient(to bottom left, red, yellow, green);