CSS3新增特性

2016-07-14 本文已影响269人我的梦想之路

1>RGBA透明度：在RGB上设置了Alpha透明值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS3新增属性</title>
        <style type="text/css">
        div{
            font-size: 20px;
            width: 50px;
            /*设置整个div不透明度*/
            /*opacity: 0.6;*/
        }
        .test1{
            background-color: rgba(255,0,0,1);
        }
        .test2{
            background-color: rgba(255,0,0,0.8);
        }
        .test3{
            background-color: rgba(255,0,0,0.6);
        }
        .test4{
            background-color: rgba(255,0,0,0.4);
        }
        .test5{
            background-color: rgba(255,0,0,0.2);
        }
        </style>
    </head>
    <body>
        <div class="test1">1111</div>
        <div class="test2">2222</div>
        <div class="test3">3333</div>
        <div class="test4">4444</div>
        <div class="test5">5555</div>
    </body>
</html>