参考:
http://www.runoob.com/css3/css3-tutorial.html
CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。
一些最重要CSS3模块如下：
- 选择器
- 盒模型
- 背景和边框
- 文字特效
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
1.CSS3边框:
用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
在本章中，您将了解以下的边框属性：
- border-radius
- box-shadow
- border-image
1. 圆角边框
<style> div{ ???border:2px solid #a1a1a1; ???padding:10px 40px; ????background:#dddddd; ???width:300px; ???border-radius:25px;}</style></head><body><div>border-radius 属性允许您为元素添加圆角边框！ </div>2.阴影
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
2.CSS3背景
CSS3中包含几个新的背景属性，提供更大背景元素控制。
在本章您将了解以下背景属性：
- background-image
- background-size
- background-origin
- background-clip
background-image属性
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
#example1 { ???background-image: url(img_flwr.gif), url(paper.gif); ???background-position: right bottom, left top; ???background-repeat: no-repeat, repeat; ???padding: 15px;}</style>CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
body{ ???background:url(/try/demo_source/img_flwr.gif); ???background-size:80px 60px; ???background-repeat:no-repeat; ???padding-top:40px;}CSS3的background-Origin属性
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
div{ ???border:1px solid black; ???padding:35px; ???background-image:url(‘smiley.gif‘); ???background-repeat:no-repeat; ???background-position:left;}#div1{ ???background-origin:border-box;}#div2{ ???background-origin:content-box;}CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>#example1 { ???border: 10px dotted black; ???padding:35px; ???background: yellow;}#example2 { ???border: 10px dotted black; ???padding:35px; ???background: yellow; ???background-clip: padding-box;}#example3 { ???border: 10px dotted black; ???padding:35px; ???background: yellow; ???background-clip: content-box;}</style></head><body><p>没有背景剪裁 (border-box没有定义):</p><div id="example1"><h2>Lorem Ipsum Dolor</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div><p>background-clip: padding-box:</p><div id="example2"><h2>Lorem Ipsum Dolor</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div><p>background-clip: content-box:</p><div id="example3"><h2>Lorem Ipsum Dolor</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div></body></html>CSS3边框与背景
原文地址：http://www.cnblogs.com/qlqwjy/p/7466676.html