css3(1)简介

css3-简单介绍

选择符
- 元素选择符
  - 标签选择符
  - 类选择符
  - id选择符
  - 通配符
- 关系选择符
  - 子代选择符
  - 后代选择符
  - 相邻选择符（下一个+）
  - 兄弟选择符（小弟选择符~)
- 属性选择符
  - div[attr]
  - div[attr=val]
  - div[attr^=val]
  - div[attr$=val]
  - div[attr=val]*
  - div[attr~=val]
  - div[attr|=val]
- 伪类选择符
  - first-child/last-child
  - nth-child(n)/nth-last-child(-n)
  - first-of-type/last-of-type
  - nth-of-type(n)/nth-last-of-type(n)
- 伪元素选择符
  - ::before/::after
    - 默认是行内元素
    - 要加上content
    - 单标签加伪元素没有效果
    - js中无法操作伪元素
  - ::first-letter/::first-line
  - ::selection/::input-placeholder
盒子模型
- box-sizing:border-box
- box-sizing:content-box
阴影
- 文本阴影
- 边框阴影
边框圆角
边框图片
- border-image-source:边框图片的路径
- border-image-slice:需要切割显示的边框图片 // 注意不要加 px单位 27 fill
- border-image-width:边框宽度-默认用border
- border-image-repeat:设置边角外的图片的显示方式
  - repeat 可能会出现裁切
  - round 拉伸适应
  - space 压缩适应
  - stretch 默认值拉伸
  - border-image-outset 边框外延
背景
- background-image：指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
- background-position：指定对象的背景图像位置。
- background-size：指定对象的背景图像的尺寸大小。
- background-repeat：指定对象的背景图像如何铺排填充。
- background-attachment：指定对象的背景图像是随对象内容滚动还是固定的。
- background-origin：指定对象的背景图像显示的原点。
  - border-box 从边框开始显示
  - padding-box 从padding开始显示
  - centent-box 从内容开始开始显示
- background-clip：指定对象的背景图像向外裁剪的区域。
  - border-box 从border开始显示
  - padding-box 从padding 开始显示
  - centent-box 从内容开始显示
- background-color：指定对象的背景颜色。