您的位置:首页 > Web前端 > CSS

CSS3学习笔记(一)

2010-08-02 21:22 204 查看
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 */
}

好记性,不如烂笔头,记一下,以便日后查阅。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: