CSS3 颜色

设计Web页面不可缺少的就是颜色，对于颜色的运用是设计方面的事情，但是对于前端开发，合理的使用颜色作出效果也是很重要的。

CSS3在CSS2的基础上增加了RGBA，HSL和HSLA模式，对于所有的样式属性中需要颜色的部分，在CSS3都可以采取如下的方式使用颜色：

• 色彩名称
• rgb(R,G,B)
• rgba(R,G,B,alpha)
• hsl(H,S,L)
• hsl(H,S,L,alpha)

RGB的颜色已经很熟悉了，就是0-255（也可以使用百分比，没有0-255精确）表示三原色的强度，RGBA在此基础上增加了透明度alpha，用0-1之间的数字代表透明度，越大越透明。

HSL则是用色调，饱和度和亮度来控制色彩，也是广泛使用的色彩之一。其中H指色调，0是红色，120是绿色，240是蓝色；超过360则用数字取360模的余数表示。S是饱和度，取百分数，0表示灰度颜色，100%表示饱和度最高。L是亮度，取值也是0-100%，0为黑色，100%为白色。

opacity

除了色彩之外，这里再介绍一个和色彩紧密相关的属性，就是透明度

opacity的值很简单，就一个数字值，默认为1，可以取0-1的任何浮点数。也可以取inherit表示继承。

这个属性不仅可以用于背景，会将该元素的所有内容都变成透明。使用中要注意。

CSS3 盒模型

CSS2的盒模型已经很熟悉了，CSS2的盒模型最大的问题（或者说特点）在于width指定的只是内容区的宽度，如果加padding和边框，会把盒子的实际在页面中占的宽度改变。由于这个盒模型也是W3C的标准，这么多多年大家也已经很习惯了。

CSS3里针对旧的盒模型，提出了一种新的盒模型。这种模型设置了宽度，就固定了在页面中的总宽度，设置border和padding只会把内容往里边挤，而不会向外增加总宽度。只要在一个盒子元素中增加一个新的属性 box-sizing 然后设置对应的属性，就可以将当前元素改变为CSS3的盒模型

box-sizing

这个属性用来改变盒模型的解析方式，有三个值可以选择：

• content-box 宽度只作用在内容区域，即W3C的标准盒模型。
• border-box 宽度包含border，padding和内容区，即CSS新的盒模型
• inherit 继承

这个属性的兼容性还是不错的，除了IE9以上，其他的现代浏览器都支持。

如果是面向现代浏览器，在排版的时候，使用CSS3盒子可以有效的减少排版的麻烦，可以自如的修改padding和border但不会影响总体布局。

与CSS3盒模型相关的一些属性

与盒模型相关有一些更新的属性：

• overflow-x 和 overflow-y

  本来CSS2里有overflow属性，CSS3里新增了overflow-x 和 overflow-y属性用于单独控制水平和垂直方向溢出内容的剪切。有五个值：

  • visible 默认值，表示不剪切内容也不增加滚动条
  • auto 超过的时候可以添加滚动条
  • hidden 内容超出容器的时候隐藏
  • scroll 不管是否溢出，overflow-x会添加水平滚动条，overflow-y则会添加垂直滚动条
  • no-display 当内容溢出时整个都不显示元素，类似于display:none
  • no-content 当内容溢出的时候不显示内容，类似于visbility:hidden

• resize

  这个属性允许用户通过拖动来改变元素的大小，经常用在textarea等表单元素。有五个值可以选一个：

  • none 用户不能修改元素大小
  • both 用户可以同时修改高度和宽度
  • horizontal 用户只能修改宽度，不能修改高度
  • vertical 用户只能修改高度，不能修改宽度
  • inherit 继承父元素的设置

• outline

  CSS2中就有了outline，outline不会影响布局。outline的属性如下：

  • outline-color 轮廓颜色
  • outline-style 轮廓线样式，省略就是none即无轮廓
  • outline-width 轮廓线的宽度，省略了就是medium即中等程度的轮廓线
  • outline-offset 表示偏移量，正数表示向外偏移，负数表示向内偏移。这个属性是CSS3新增的。
  • inherit 继承父元素的outline