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);