css3笔记

前缀是-webkit-的Safari和Chrome支持

前缀是-moz-的Firefox支持

前缀是-o-的Opera支持

CSS3边框

　　border-radius （CSS3圆角）

border-radius: 2em  /  2em 1em 4em  /  1em 3em;

is equivalent to:

border-top-left-radius: 2em  /  2em   /  1em;
border-top-right-radius: 2em  /  1em  /  3em;
border-bottom-right-radius: 2em  /  4em  /  1em;
border-bottom-left-radius: 2em  /  1em  /  3em;

注意：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角

　　box-shadow （CSS3盒阴影）

border-shadow: 10px(h-shadow)  10px(v-shadow)  5px(blur)  #888(color)

the grammar is:

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

　h-shadow : 必须的。水平阴影的位置。允许负值

　 v-shadow : 必须的。垂直阴影的位置。允许负值

blur : 可选。模糊距离

　 spread : 可选。阴影的颜色

inset ： 可选。从外层的阴影（开始时）改变阴影内侧阴影

　　border-image（CSS3边界图片）

-moz-border-image: url("border.png") 30 30 round;  /*Firefox*/
-webkit-border-image: url("border.png") 30 30 round;  /*Safari 和 Chrome*/
-o-border-image: url("border.png") 30 30 round;   /*Opera*/
border-image: url("border.png") 30 30 round;

the grammer is :

border-image:source slice width outset repet;

border-image-source: none | image;        [url("border.png")]
border-slice: number | % | fill;          [30 30]
border-width: number | % | auto;          [initial]
border-image-outset: length | number;     [initial]
border-image-repeat: stretch | repeat | round | initial | inherit;   [round]

　 border-image-source : 用于指定要用于绘制边框的图像的位置

border-image-slice : 图像边界内偏移

　 border-image-width : 图像边界的宽度

　 border-image-outset : 用于指定在边框外部绘制 border-image-area 的量

　 border-image-repeat : 用于图像边界是否拉伸（stretch）、重复（repeat）、铺满（round）、默认值（initial）或者继承（inherit）