day17 阴影 背景图 响应式布局

1. 盒子阴影

• box-shadow: 水平偏移 垂直偏移 阴影模糊大小 阴影大小 阴影颜色 阴影位置(inset:里面);
• 水平及垂直 向右和向下为正数,反之为负数

2. 文本阴影

• text-shadow: 水平偏移 垂直偏移 阴影模糊大小 阴影颜色
• 值的特点和盒子阴影一样

3. 背景图大小

• background-size:宽度 高度;

• 属性值：

  • 数值+px
  • 百分比

  • 关键字

    • cover 图片不断被拉伸,直到充满整个盒子,可能会出现背景图被裁掉
    • contain 图片不断被拉伸,直到碰到盒子某个边缘之后就停止拉伸,可能会出现留白

4. 背景图裁切

• background-clip

  • border-box 从边框之外裁切
  • padding-box 从padding区域开始裁切
  • content-box 从内容区域开始裁切
• 不需要去重复

5. 背景图原点

• background-origin

  • padding-box 从padding区域开始显示
  • border-box 从边框区域开始显示
  • content-box 从内容区开始显示

6. 背景图的固定

• background-attachment: scoll(滚动)/fixed(固定) 背景图固定,内容滚动

7. 圆角

• border-radius

  • 一般设置50%,实现圆形
  • 一个值: 四周
  • 两个值: 对角
  • 三个值: 左上 对角 右下
  • 四个值: 顺时针

8. 响应式布局

根据不用的设备分辨率 显示不同的样式

• 优点: 适配性好,高级
• 缺点: 工作量大,繁琐,适用于小网站

• 媒体查询：

  @media 设备类型 and (媒体特性){

  选择器{

  ​ 样式

  ​ }

  ​ }

设备类型: all(全部)/screen(显示器)

媒体特性: max-width/min-width

• 写法注意:

  • 1) and两边必须有空格
  • 2) 媒体特性后面不要加分号
  • 3) 多个媒体特性之间用and连接