CSS3基础效果

1.表单与背景的层次分开，关键知识点：rgba。 就像这样：登陆
关键css代码：

    body{
        background: url(img.jpg) no-repeat bottom center;
    }
    form{
        background: rgba(0,0,0,0.2);
    }

2.设置透明度，opacity与rgba的区别 关键css代码：

        .div1{
            background-color:rgb(0,0,0);
            opacity: 0.5;
            color: #000000;
        }
        .div2{
            background-color: rgba(0,0,0,0.5);
            color: #000000;
        }

效果： 上图中的div1中是文本选中状态，不然根本看不见。所以opacity是设置选中元素及其子元素的不透明值，而rgba只设置选中元素。

3.圆角 关键css代码：

    div{
        -moz-border-radius: 25px;
        border-radius:25px;
    }

4.投影

关键css代码：

        .div1{
            background-color: rgb(72,72,72);
            -webkit-box-shadow: 2px 2px 0 0 rgba(72,72,72,1);
            -moz-box-shadow:2px 2px 0 0 rgba(72,72,72,1);
            box-shadow: 2px 2px 0 0 rgba(72,72,72,1);;
        }
//box-shadow: 水平偏移(正右负左) 垂直偏移(正下负商) 阴影模糊距离 阴影扩张距离 rgba颜色及透明度;

5.文本投影 关键css代码：

text-shadow: 3px 3px 1px rgba(0,0,0,0.5);

来源：oschina

链接：https://my.oschina.net/u/2895042/blog/790174