CSS3

CSS3的厂商前缀

浏览器	系统前缀
Chrome	-webkit-
Firefox	-moz-
IE	-ms-
Opera	-webkit-
Safari	-webkit-

圆角边框

浏览器

注释：Opera 对于 border-image 需要前缀 -o-。

border-radius: 1-4 length|% / 1-4 length|%;
其中，第一组值表示水平半径，第二组值表示垂直半径.

1. border-radius:80px;
   四个角的水平半径和垂直半径均为80px;

2. border-radius:80px 40px;
   top-left和bottom-right的水平半径和垂直半径均为80px;
   top-right和bottom-left的水平半径和垂直半径均为40px;

3. border-radius:80px 40px 10px;
   top-left的水平半径和垂直半径均为80px;
   top-right和bottom-left的水平半径和垂直半径均为40px;
   bottom-right的水平半径和垂直半径均为10px;
   

4. border-radius:80px 40px 20px 10px /80px 40px 20px 10px;

   top-left的水平半径和垂直半径均为80px;
   top-right的水平半径和垂直半径均为40px;
   bottom-right的水平半径和垂直半径均为20px;
   bottom-left的水平半径和垂直半径均为10px;

5. ex:
   border-radius: 2em 1em 4em / 0.5em 3em;
   等价于：
   border-top-left-radius: 2em 0.5em;
   border-top-right-radius: 1em 3em;
   border-bottom-right-radius: 4em 0.5em;
   border-bottom-left-radius: 1em 3em;

TIY

http://www.w3school.com.cn/tiy/c.asp?f=css_box-shadow&p=15

边框阴影

语法：box-shadow: h-shadow v-shadow blur spread color inset;

TIY

http://www.w3school.com.cn/tiy/c.asp?f=css_border-radius&p=6

边框图片

border-image 属性是一个简写属性，用于设置以下属性：
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

背景

背景图片的定位区域：
background-origin

多重背景图片：
background-image:url(bg_flower.gif),url(bg_flower_2.gif);

文本效果

text-shadow：水平阴影 垂直阴影 模糊距离;

字体

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

div
{
font-family:myFirstFont;
}
</style>

2D转换、3D转换transform

translate()：
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）
ex:transform: translate(50px,100px);

rotate()
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
ex:transform: rotate(30deg);

scale() :
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数.
ex:transform: scale(2,4); //值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew() :
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数.
ex:transform: skew(30deg,20deg);//值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

过渡

其他

动画：@keyframes{ }
column-count:3 //文本分隔为三列
column-gap //规定列之间的间隔
resize //规定是否可由用户调整元素尺寸
outline-offset //对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

• 轮廓与边框有两点不同：
• 轮廓不占用空间
• 轮廓可能是非矩形