css3

• css2+新语法
• 对css2进行扩充 删减 优化

选择器

• 选择器：选择器、id选择器、标签选择器
• 属性选择器：
  E-element元素 data-属性
  E[data]
  E[data="one"]
  E[data^="o"]
  E[data$="e"]
  E[data*="e"]

伪类结构

• E-element元素 data-属性
• E:first-child{}
  E:last-child{}
  E:only-child{}
  E:nth-child(n){}
  E:nth-child(2n+1){}
  E:nth-child(odd){}
  E:nth-child(2n){}
  E:nth-child(even){}

伪元素

• E-element元素 data-属性
• E:first-letter{} 设置第一个元素
  E:last-line{} 设置第一行元素
  E::after{content:"ddd";}在盒子里面最后面插入内容
  E::before{content:"ddd";}在盒子里面最前面插入内容

文本阴影 text-shadow:水平 垂直 模糊强度（可不填） 颜色（可不填，默认黑色）

• text-shadow:2px 2px 2px red，-2px -2px 2px blue;
• 水平：正值-右侧，负值-左侧
• 垂直：正值-下，负值-上
• 可以有多组值，之间用逗号相隔

盒子阴影 box-shadow:水平 垂直 模糊强度 模糊尺寸 内外阴影（inside/outside-默认） 颜色

• box-shadow:2px 2px 2px 2px gray,-2px -2px 2px 2px blue;
• 水平：正值-右侧，负值-左侧
• 垂直：正值-下，负值-上
• 可以有多组值，之间用逗号相隔

盒子圆角 border-radius:左上 右上 右下 左下

• border-radius：50%；--圆

设置半透明色

• 设置半透明色 color:rgb(0,0,0,0.6) background:rgb(0,0,0,0.5)

背景缩放

• background-size:宽度 高度；
• background-size:400px 600px；
• background-size:cover；高宽覆盖整个盒子
• background-size:contain；高或者宽某项覆盖了整个个盒子