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 */
        }

 

 好记性，不如烂笔头，记一下，以便日后查阅。