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

}

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