CSS3学习笔记（一）

目标：把CSS3的属性过一遍。教程使用W3Cschool。

CSS边框

圆角边框 

border-radius:25px    

阴影

box-shadow:h-shadow v-shadow blur spread color inset

边框图片（图片路径，向内偏移量，宽度，超出边框的量，（平铺repeated，铺满rounded或拉伸stretched））

border-image:url(border.png) 30 30 round

注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

CSS背景

background-size属性规定背景图片的尺寸。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
background-origin 属性规定背景图片的定位区域



背景图片可以放置于 content-box、padding-box 或 border-box 区域。

多重背景图片 

background-image:url(bg_flower.gif),url(bg_flower_2.gif)

文字效果

文本阴影效果

text-shadow: 5px 5px 5px #FF0000

文本自动换行

word-wrap:break-word

CSS3字体

可以将字体放在web服务器上，需要时自动下载

使用@font-face定义，粗体需要额外定义

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}