CSS3 Borders & Backgrounds & Colors

CSS3 Borders

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border

Related border properties:

• border-radius 圆角边框, 该性质实际上是（border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties）的简写形式，指定不同的值，按顺序依次设定
  
  • 4 values: 左上角、右上角、右下角、左下角
  • 3 values: 左上角、右上角和左下角 （其实是斜对角）、右下角
  • 2 values: 左上角和右下角、右上角和左下角
  • 1 values: 四个角
• box-shadow 阴影
• border-image 图片边框，该性质实际上是（border-image-source, border-image-slice, border-image-width 默认值是1, border-image-outset默认值是0 and border-image-repeat properties）的简写形式，通常需要设定的三个值是：
  • 作为边框使用的 image url
    
  • 在哪里提取图片
    
  • 定义中间部分是应该 repeated 重复 还是 stretched 拉伸
    

Note: For border-image to work, the element also needs theborder property set! 要使用图片边框，需要设置 border 这个性质。

CSS3 Backgrounds

Several new background properties:

• background-size: 允许我们以长度、百分比、或是两个关键词 contain、cover 来设定背景图片的大小。该性质接受以逗号分隔开的多个值（在使用多背景图的情况下）。
  
• background-origin: 指定背景图片放置的位置，该性质的三个取值是：
  • border-box: 背景图从边框的左上角开始
    
  • padding-box: 此为默认值，背景图从内边距的边缘左上角开始
    
  • content-box: 背景图从内容区域左上角开始
    

  

• multiple background images: 针对一个HTML元素使用多个背景图，用法和单个背景图一样，可以使用单独的性质（background-image、background-position、background-repeat）一一进行设定，也可以使用 background 简写性质来设定，每张图片以逗号区分开来。

• background-clip: 指定背景上色的区域。取值类型同 background-origin。但默认值是 border-box！
  

Example： 给网站设置背景图片，要求覆盖住整个浏览器窗口，图片位于页面中心，如有需要可放大图片，没有滚动条

html {    background: url(img_flower.jpg) no-repeat center center fixed;     background-size: cover;}

CSS3 Colors

CSS Colors 可以有三种基本表示方法：

• Predefined Color name 预定义颜色名称表示法 : 17 standard colors are: aqua 水绿色, black, blue, fuchsia 紫红色, gray, green, lime 绿黄色, maroon 褐红色/栗色, navy 藏青色, olive 黄褐色/橄榄色, orange, purple, red, silver, teal 青色, white, and yellow
• HEX 十六进制表示法 : 语法 #RRGGBB 或者 #RGB  例如： #ff0000,#00ff00,#0000ff,分别对应 红、绿、蓝
• RGB 三原色配色表示法 : rgb(255,0,0)，rgb(0,255,0)，rgb(0,0,255)

CSS3 新增 Colors

• RGBA colors : An RGBA color value is specified with: rgba(red, green, blue, alpha). 新增的最后一个参数表示透明度。Thealpha parameter is a number between 0.0 (fully transparent 完全透明) and 1.0 (fully opaque 完全不透明)
• HSL colors : An HSL color value is specified with: hsl(hue色调, saturation 饱和度, lightness 亮度) 前者取值在0-360之间（0或360是 red，120是 green，240是blue），后两者按百分比取值，其中倒数第二个取100%表示 full color，最后一个取0%是 black，取100%是white
  
• HSLA colors : 在HSL基础上添加了一个alpha透明度参数，用法同RGBA