CSS3新增部分常用属性总结

一、CSS3新增的边框属性

1.border-color：为边框设置颜色
相关属性：border-top-color, border-right-color, border-bottom-color , border-left-color

div{
        width: 300px;
        height: 300px;
        border-style: solid;
        border-color: red blue green yellow;//上、右、下、左
}

2.border-image：图片边框
border-image ：< image > [ < number > | < percentage >] [ < border-width > ] [ stretch | repeat | round ]
相关属性：border-image：border-top-image , border-right-image , border-bottom-image , border-left-image
border-corner-image：border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image

[ stretch | repeat | round ]：
拉伸 | 重复 | 平铺 (其中stretch是默认值。)
div
{
-webkit-border-image:url(image.png) 30 30 round; /* Safari 5 */
-o-border-image:url(image.png) 30 30 round; /* Opera */
border-image:url(image.png) 30 30 round;
}

3.border-adius:圆角边框
border-radius ： none | < length>{1,4} [ / < length>{1,4} ]?

相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

div
{
        width: 300px;
        height: 300px;
        border: 10px solid red;
        border-radius: 50px;
}

4.box-shadow：阴影效果
box-shadow：< length> < length> < length> || < color>
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色

div
{
        width: 300px;
        height: 300px;
        box-shadow:10px 20px 20px black;
}

二、CSS3新增背景属性

1.background-origin:指定背景图片从哪里开始显示
background-origin ： border | padding | content
border：
从border区域开始显示背景。
padding：
从padding区域开始显示背景。
content：
从content区域开始显示背景。

div

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-position:left;

background-origin:content-box;

}

2.background-size：指定背景图片尺寸
background-size ：[ | | auto ]{1,2} | cover | contain

3.background-clip：背景剪裁
border-box：
从border区域向外裁剪背景。
padding-box：
从padding区域向外裁剪背景。
content-box：
从content区域向外裁剪背景。
no-clip：
从border区域向外裁剪背景。

div

{

background-color:yellow;

background-clip:content-box;

}

三、CSS3新增文字效果

1.text-shadow：文本阴影

h1
{
text-shadow: 10px 20px 20px red;
}

2.word-wrap：自动换行

word-wrap ： normal | break-word
normal：
控制连续文本换行。
break-word：
内容将在边界内换行。如果需要，词内换行（word-break）也会发生。

3.text-overflow：
text-overflow ： clip | ellipsis
clip：
不显示省略标记（…），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（…）