CSS3使用注意项：早期的firefox chrome 等某些游览器中也实现了部分CSS3，所以为了兼容部分，在CSS3中的编写，需要如此：
{-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;}
{moz内核游览器，webkit内核游览器，IE9}
Web2.0中，圆角效果是很常见的，以前都是用图片来模仿，现在直接用css就能实现，例子代码如下
Html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
body{
padding: 20px;
background-color: #FFCC66;
font: 100.01% "Trebuchet MS", "Verdana", "Arial", "sans-serif";
color: #000000;
}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#roundconner{ margin: 0 10%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFCC66}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<body>
<div id="roundconner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
爱问知识人网络 http://www.awzsr.com
爱问知识人网络 http://www.awzsr.com
爱问知识人网络 http://www.awzsr.com
爱问知识人网络 http://www.awzsr.com
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</body>
</html>
只要新建一个html文件，把里面都内容全部替换成上面的代码就可以看到效果了
border-radius:（圆角）
border-radius语法为：border-radius ： none | <length>{1,4} [/ <length>{1,4} ]? “/”前是指圆角的水平半径，而“/”后是指圆角的垂直半。
1.border-radius:10px; 当它只有一个值的时候，代表了四个角，如图：
2.border-radius:20px 5px 20px 5px;当它取四个值的时候，也许我们能换成如下更直观的CSS代码：
<span style="color: rgb(128,0,0)"> border-top-left-radius: 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 5px;</span>
它的顺序位置分别是左上角->右上角->右下角->左下角，效果图如下：
3.border-radius:20px 5px; border-radius:20px 5px 40px;
[第一项的意思是与例子2相同，取两值，意思是左上角与右下角为20px，右上角与左下角为5px。]
[第二项的意思，当取三值的时候，左上角为20px，右上角为5px，右下角为40px，左下角为5px。] 效果图如下：
4.border-radius:20px 5px / 30px 30px;
前两项取值，是水平位置，后两项取值是垂直位置，它们与上述位置对应，左右右左。如图：
rgba:（R+G+B+Alpha）
语法格式：rgba(255,0,0,1);
它们分别对应颜色，饱和度，亮度，透明度。
应用：字体阴影等。
text-shadow:（文字阴影）
语法格式：[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]。#p#分页标题#e#
一个无text-shaodw效果的字体图片，如下：
从语法格式上，我们能看到，先取颜色，然后X轴，Y轴，模糊的半径。X轴：是阴影水平偏移的距离，正向右负向左。Y轴：是阴影垂直偏移的距离，正向下负向上。模糊半径的意思是：其模糊的程度，不能有负数值，值越大阴影越模糊，反之阴影则越清晰。
1.text-shadow:#333 0 3px 2px; 如图：
2.text-shadow:还能在一组字体上运用多个阴影，用','相隔开即可。
box-shaodw（图层阴影）
语法格式：box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 [最多六个值可取]
说明：
投影方式：这里可选外，还是内。inset[内]，不选[内]
X轴：水平偏移的方向，正向右负向左。
Y轴：垂直偏移的方向，正向下负向上。
阴影模糊半径：只能为正数值，越大越模糊。
阴影扩展半径：正扩大负缩小。
阴影颜色：就是颜色了。
1.box-shadow:inset 0px 0px 10px 10px #936;
2.box-shadow: 0px 0px 10px 10px #936;
3.box-shadow: inset 10px 10px 10px -10px #936;
