CSS3新属性简单总结（1）

div
{
border:2px solid #a1a1a1;
border-radius:25px;/*IE9+、Firefox4+、Chrome、Safari5+、Opera*/
-moz-border-radius:25px; /* 老的 Firefox */
}

/*border-radius:25px等价于*/
border-top-left-radius:25px;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;

/*从top-left开始顺时针*/
border-radius:25px 0px 25px 0px
/*等价于*/
border-radius:25px 0px

/*不规则圆角*/
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;

/*IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。*/
div
{
    box-shadow: 10px 10px 5px #888888;
}

box-shadow: h-shadow v-shadow blur spread color inset;
/*
h-shadow    必需。水平阴影的位置，允许负值。
v-shadow    必需。垂直阴影的位置，允许负值。    
blur        可选。模糊距离。
spread      可选。阴影的尺寸。    
color       可选。阴影的颜色。
inset       可选。将外部阴影 (outset) 改为内部阴影。
*/ 

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;/*Internet Explorer 11, Firefox, Opera 15, Chrome , Safari 6*/
}

/*IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+*/
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

/*IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 。*/
div
{
background-image:url(‘smiley.gif‘);
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

/*IE9+、Firefox、Opera、Chrome 以及 Safari */
div
{
background-color:yellow;
background-clip:content-box;
}

/*Internet Explorer 9+及其他*/
/*text-shadow: h-shadow v-shadow blur color;*/
h1
{
text-shadow: 5px 5px 5px #FF0000;
}

div.test
{
text-overflow:ellipsis;
}

/*Opera不支持*/
p.test {
word-break:hyphenate;
}

p.test {
word-wrap:break-word;
}