CSS3新属性简单总结（1）

一、边框

1.border-radius

简略写法：

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

值：px、em、%

多种写法：

/*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;

2.box-shadow

简略写法：

/*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) 改为内部阴影。
*/ 

3.box-image

简略写法：

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*/
}

完整属性：

• border-image-source  图片路径
• border-image-slice     图片边框向内偏移
• border-image-width    图片边框宽度
• border-image-outset   边框图片区域超出边框的量
• border-image-repeat   repeated平铺、stretched拉伸、rounded铺满

二、背景

1.background-size

简略写法：

/*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;
}

值：px、em、%、cover、contain

2.background-origin

简略写法：

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

值：content-box、padding-box、border-box；

background-origin 属性规定 background-position 属性相对于什么位置来定位。

如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果

3.background-clip

简略写法：

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

值：content-box、padding-box、border-box；

三、文本效果

1.text-shadow

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

2.text-overflow

div.test
{
text-overflow:ellipsis;
}

值：clip、ellipsis、string

3.word-break

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

值：normal、break-all、keep-all

4.word-wrap

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

值：normal、break-word（在长单词或 URL 地址内部进行换行）