CSS3知识整理之选择器，颜色，文本，边框，盒模型，背景和渐变

CSS3 概览

CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

• 特点如下：

  • 浏览器支持程度差，需要添加私有前缀
  • 移动端支持优于PC端
  • 不断改进中且应用相对广泛

• 应用场景：

  • 坚持渐进增强原则
  • 考虑浏览器用户群体
  • 遵照产品的方案

CSS3 选择器

• 属性选择器
• 伪类选择器
• 伪元素选择器

属性选择器

通过属性来选择元素，常用以下几种形式：

• E[attr] 表示存在attr属性即可
• E[attr=val] 表示属性值完全等于val
• E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置
• E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置
• E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置

伪类选择器

除了CSS2中常见的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器：

• 以某元素相对于其父元素或兄弟元素的位置来获取无素的【结构伪类】

  • E:first-child第一个子元素
  • E:last-child最后一个子元素
  • E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素
  • E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；n遵循线性变化，其取值0、1、2、3、4、… 但是当n<=0时，选取无效。n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等
  • E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）

• 【目标伪类】

  • E:target 结合锚点进行使用，处于当前锚点的元素会被选中

伪元素选择器

• E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
• E::first-line 文本第一行
• E::before、E::after是一个行内元素，需要转换成块元素
• E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
• E::selection 可改变选中文本的样式；

注意： “:” 与 “::” 区别在于区分伪类和伪元素

CSS3中的颜色表示

在CSS3中新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。

• Red、Green、Blue、Alpha即RGBA
• Hue、Saturation、Lightness、Alpha即HSLA
• 关于取值范围：

R、G、B 取值范围0~255
H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1

• 关于透明度：
  
  • opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
  • transparent 不可调节透明度，始终完全透明RGBA、HSLA可应用于所有使用颜色的地方。

CSS3 文本

• text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）
  
  • 水平偏移量 正值向右 负值向左；
  • 垂直偏移量 正值向下 负值向上；
  • 模糊度是不能为负值；

CSS3 边框

其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，使用较为广泛

边框圆角 border-radius

• 形成圆、圆心、横轴、纵轴的概念
• 可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）

边框阴影 box-shadow

• 水平偏移量 正值向右 负值向左；
• 垂直偏移量 正值向下 负值向上；
• 模糊度是不能为负值；
• inset可以设置内阴影；
• 设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
• 可以设置多重边框阴影，实现更好的效果，增强立体感。

边框图片

设置的图片将会被“切割”成九宫格形式，然后进行设置，“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺

• round和repeat之间的区别： round 会自动调整尺寸，完整显示边框图片；repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。

• 更改裁切尺寸：background-slice: 切上 切右 切下 切左

CSS3 的盒子模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：

• box-sizing: border-box 计算方式为width = border + padding + content
• box-sizing: content-box 计算方式为width = content

CSS3 背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

• background-size设置背景图片的尺寸:

  • cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏
  • contain会自动调整缩放比例，保证图片始终完整显示在背景区域
  • 也可以使用长度单位或百分比

• background-origin设置背景定位的原点:

  • border-box以边框做为参考原点
  • padding-box以内边距做为参考原点
  • content-box以内容区做为参考点

• background-clip设置背景区域裁切

  • border-box裁切边框以内为背景区域
  • padding-box裁切内边距以内为背景区域
  • content-box裁切内容区做为背景区域

• 以逗号分隔可以设置多背景，可用于自适应局,背景图片尺寸在实际开发中应用十分广泛

CSS3 渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变

线性渐变 linear-gradient

线性渐变指沿着某条直线朝一个方向产生渐变效果。

• 必要的参数：

  • a、方向 默认不写表示 180deg，从上往下的方向
  • b、起始颜色
  • c、终止色

• 关于方向：在二维坐标中，90deg为x轴正方向，0deg为y轴正方向

径向渐变 radial-gradient

径向渐变指从一个中心点开始沿着四周产生渐变效果

• 必要的参数：

  • a、辐射范围即圆半径
  • b、中心点 即圆的中心
  • c、渐变起始色
  • d、渐变终止色

• 关于中心点：中心位置参照的是盒子的左上角

• 关于辐射范围：其半径可以不等，即可以是椭圆