CSS3学习笔记（一）
1.圆角效果
#indie
{
background: #000;
border: 1px solid #ccc;
/*FF*/
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
/*苹果和谷歌*/
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
/*oprea*/
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
总结：目前IE浏览器不支持。
----------------------------------------------------------------------------------------
2.不透明度
#opacity
{
background: #000;
opacity: 0.1;/*FF,Chrome，safari,opera浏览器*/
filter: alpha(opacity=10);/*IE浏览器*/
width: 800px;
height: 400px;
}
----------------------------------------------------------------------------------------
3.shadow阴影效果
目前只有Safari和Chrome，opera支持这个新特性。
#shadow
{
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;/*Safari和Chrome*/
box-shadow: 3px 5px 10px #ccc;/*opera*/
}
----------------------------------------------------------------------------------------
4.调整大小
/*目前仅Safari支持，在这里主要说一下resize和overflow属性，resize:both;的意思就是所有边都可以调整尺寸，
它的值还有horizontal和vertical，顾名思义，就是横向和纵向。而overflow是为了配合resize工作的，在这里使用auto.*/
#resize
{
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}
5.颜色渐变
.box_gradient
{
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
}
好记性，不如烂笔头，记一下，以便日后查阅。