Rocho.J

人脑是不可靠的, 随时记录感悟并且经常重复!

 

圆角矩形, 透明, 渐变 [转]

View Code 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS test</title>
    <style type="text/css">
        body
        {
            margin: 0; /*背景图片固定居中            http://www.w3school.com.cn/css/pr_background-position.asp            http://www.198484.com/?action=show&id=51            */
            background-image: url('images/bg1.jpg');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
        }
        #header
        {
        }
        #inner-header
        {
            margin: 0 auto;
            width: 960px;
            background-color: Gray;
            height: 80px; /*布局块阴影，如果不想支持低版本IE可去掉滤镜            http://blog.imbolo.com/cross-browsers-css-shadow/            */
            box-shadow: 3px 3px 4px #000;
            -moz-box-shadow: 3px 3px 4px #000;
            -webkit-box-shadow: 3px 3px 4px #000;
            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        }
        #main
        {
            background-color: Gray;
            margin: 10 auto;
            width: 960px;
            min-height: 500px;
            height: auto; /*            背景半透明            http://blog.csdn.net/zenwong/archive/2008/08/29/2846546.aspx            */
            filter: alpha(opacity=70); /*IE*/
            -moz-opacity: 0.7; /*Mozilla*/
            opacity: 0.7; /*FF*/ /*            圆角效果，不考虑低版本IE            http://blog.imbolo.com/creating-rounded-corners-with-css/            */
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
        }
        #footer
        {
            margin: 0 auto;
            width: 960px;
            height: 100px; /*渐变效果            http://www.zhangxinxu.com/wordpress/?p=743            */
            filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
            -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); /*IE8*/
            background-color: Gray; /* 一些不支持背景渐变的浏览器 */
            background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
            background: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
        }
    </style>
    <!--[if IE]>    <style type="text/css">        #main        {            height: 500px;        }        body        {            text-align:center;        }        #inner-header        {        text-align:left;        }    </style>    <![endif]-->
</head>
<body>
    <div id="header">
        <div id="inner-header">
            <h1>
                CSS Demo</h1>
        </div>
    </div>
    <div id="main">
    </div>
    <div id="footer">
    </div>
</body>
</html>

posted on 2011-05-09 18:41  RJ  阅读(354)  评论(0)    收藏  举报

导航