第2章 气泡对话框

主要内容：

• word-wrap属性，用来容纳溢出的文本
  word-wrap: break-word ;
  尤其针对带有URL的文本。
• border-radius属性，用来实现圆角
• 实现一个圆形：

width: 10em;
height: 10em;
-moz-border-radius: 5em;
-webkit-border-radius: 5em;
border-radius: 5em;    //无前缀属性必须被置于最末

• 实现一个纯CSS三角形的要素是：将一个元素的width和height设为0，然后为它设置较粗的边框，并将其中三个边框的颜色设为透明，你还可以为相邻边框设置不同的边框宽度来改变三角形的角度。

• HSLA色彩模式，用来创建半透明的背景

• CSS3的RGBA和HSLA色彩模式
  HEX：#A6DADC
  RGB: 166,218,220
  RGBA: 166,218,220,1
  HSL(色调、饱和度、亮度): 182,44%,76%
  HSLA: 182,44%,76%,1
  基于浏览器的取色器：FIrefox扩展Rainbow

• HSL/HSLA模式的色彩速查表

  • 0或360 = red
  • 30 = orange
  • 60 = yellow
  • 120 = green
  • 180 = cyan(青色)
  • 240 = blue
  • 270 = purple
  • 300 = magenta(紫色)
    黑色即亮度为0%，，白色亮度100%
    灰色饱和度值0%，亮度值控制灰色明暗程度

• linear-gradient方法，用来实现背景渐变
  起始色hsla(0, 0%, 100%, .6)，终止色hsla(0, 0%, 100%, 0) 30px)，终止色位置30px。

background-image: -moz-linear-gradient(
hsla(0, 0%, 100%, .6), 
hsla(0, 0%, 100%, 0) 30px);

指定渐变方式linear,水平垂直起始点(0 0)，终止点(0 30)，起始色和终止色

background-image: -webkit-gradient(
linear, 0 0, 0 30,
from(hsla(0, 0%, 100%, .6)), 
to(hsla(0, 0%, 100%, 0)));

• box-shadow属性，用来实现物件的阴影

box-shadow: 1px 1px 2px hsla(0, 0%, 0%, .3);

• text-shadow属性，用来实现文字的阴影

text-shadow: 1px 1px 0 hsla(0, 0%, 100%, .7);

• transform属性，用来旋转物件

transform: rotate(-5deg);