CSS3特性 | 落井下石

1、边框

border-radius：圆角
box-shadow：阴影
border-image：边界图片

/*圆角*/
div{border:2px solid;border-radius:25px;}

/*椭圆角*/
border-radius: 50px/15px;

/*阴影*/
div{box-shadow: 10px 10px 5px #888888;}

/*边界图片*/
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

备注：点赞，这个在css2中实现很麻烦。

2、背景

background-image：扩展了css2，可以插入多张背景图，第一张显示在最前端。
background-size：background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小
background-origin：指定了背景图像的位置区域，content-box, padding-box,和 border-box区域内可以放置背景图像
background-clip：背景剪裁属性是从指定位置开始绘制，值依旧为content-box、padding-box、border-box

/*不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。*/
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

/*可以给不同的图片设置多个不同的属性*/
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

/*重置背景图像*/
background-size:80px 60px;

/*伸展背景图像完全填充内容区域*/
background-size:100% 100%;


background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;

/*裁剪*/
background-clip: content-box;

备注：点赞

3、渐变

教程：http://www.runoob.com/css3/css3-gradients.html

备注：超级点赞
备注：但需要考虑浏览器的兼容性

4、文本效果

参考文档：http://www.runoob.com/css3/css3-text-effects.html

备注：点赞

5、字体

以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。而css3中可以自定义字体

参考文档：http://www.runoob.com/css3/css3-fonts.html

6、2D、 3D转动

参考文档：http://www.runoob.com/css3/css3-3dtransforms.html