CSS3の新特性

常用属性

不同浏览器对应不同前缀，Chrome（-webkit-），IE（-ms-），Firefox（-moz-）
transform：变形

<style type="text/css">div {    transform: rotate(10deg); /*变形*/    -ms-transform: rotate(10deg);    -webkit-transform: rotate(10deg);    -moz-transform: rotate(10deg);}</style>

border-radius：圆角

<style type="text/css">div {    border-radius: 10px; /*圆角半径*/    -webkit-border-radius: 10px;    -moz-border-radius: 10px;}</style>

box-shadow：盒阴影，rgba最后一个值表示透明度

<style type="text/css">div {    box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2); /*盒阴影*/    -webkit-box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2);    -moz-box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2);}</style>

background：设置背景色渐变

<style type="text/css">div {    background: linear-gradient(to bottom right, orange, yellow); /*背景色渐变*/    background: -webkit-linear-gradient(to bottom right, orange, yellow);    background: -moz-linear-gradient(to bottom right, orange, yellow);    background: -o-linear-gradient(to bottom right, orange, yellow);}</style>

@keyframes：动画声明

/*动画*/<style type="text/css">    @keyframes action-movie {      0% {          background: linear-gradient(to bottom right, yellow, orange);          background: -webkit-linear-gradient(to bottom right, yellow, orange);          background: -moz-linear-gradient(to bottom right, yellow, orange);          background: -o-linear-gradient(to bottom right, yellow, orange);      }      25% {          background: linear-gradient(to bottom right, orange, yellow);          background: -webkit-linear-gradient(to bottom right, orange, yellow);          background: -moz-linear-gradient(to bottom right, orange, yellow);          background: -o-linear-gradient(to bottom right, orange, yellow);      }      50% {          background: linear-gradient(to bottom right, yellow, orange);          background: -webkit-linear-gradient(to bottom right, yellow, orange);          background: -moz-linear-gradient(to bottom right, yellow, orange);          background: -o-linear-gradient(to bottom right, yellow, orange);      }      75% {          background: linear-gradient(to bottom right, orange, yellow);          background: -webkit-linear-gradient(to bottom right, orange, yellow);          background: -moz-linear-gradient(to bottom right, orange, yellow);          background: -o-linear-gradient(to bottom right, orange, yellow);      }      100% {          background: linear-gradient(to bottom right, yellow, orange);          background: -webkit-linear-gradient(to bottom right, yellow, orange);          background: -moz-linear-gradient(to bottom right, yellow, orange);          background: -o-linear-gradient(to bottom right, yellow, orange);      }    }    @-moz-keyframes action-movie {      0% {          background: linear-gradient(to bottom right, yellow, orange);          background: -webkit-linear-gradient(to bottom right, yellow, orange);          background: -moz-linear-gradient(to bottom right, yellow, orange);          background: -o-linear-gradient(to bottom right, yellow, orange);      }      25% {          background: linear-gradient(to bottom right, orange, yellow);          background: -webkit-linear-gradient(to bottom right, orange, yellow);          background: -moz-linear-gradient(to bottom right, orange, yellow);          background: -o-linear-gradient(to bottom right, orange, yellow);      }      50% {          background: linear-gradient(to bottom right, yellow, orange);          background: -webkit-linear-gradient(to bottom right, yellow, orange);          background: -moz-linear-gradient(to bottom right, yellow, orange);          background: -o-linear-gradient(to bottom right, yellow, orange);      }      75% {          background: linear-gradient(to bottom right, orange, yellow);          background: -webkit-linear-gradient(to bottom right, orange, yellow);          background: -moz-linear-gradient(to bottom right, orange, yellow);          background: -o-linear-gradient(to bottom right, orange, yellow);      }      100% {          background: linear-gradient(to bottom right, yellow, orange);          background: -webkit-linear-gradient(to bottom right, yellow, orange);          background: -moz-linear-gradient(to bottom right, yellow, orange);          background: -o-linear-gradient(to bottom right, yellow, orange);      }    }</style>

完整实例

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <noscript>Your browser does not support JavaScript pluin</noscript>    <script type="text/javascript">    </script>    <style type="text/css">        #information {            width:150px;            height: 150px;            margin:15px auto;            transform: rotate(10deg); /*变形*/            -ms-transform: rotate(10deg);            -webkit-transform: rotate(10deg);            -moz-transform: rotate(10deg);            border-radius: 10px; /*圆角半径*/            -webkit-border-radius: 10px;            -moz-border-radius: 10px;            box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2); /*盒阴影*/            -webkit-box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2);            -moz-box-shadow: 5px 10px 16px 2px rgba(0, 0, 0, 0.2);            background: linear-gradient(to bottom right, orange, yellow); /*背景色渐变*/            background: -webkit-linear-gradient(to bottom right, orange, yellow);            background: -moz-linear-gradient(to bottom right, orange, yellow);            background: -o-linear-gradient(to bottom right, orange, yellow);        }        /*动画*/        @keyframes action-movie {            0% {                background: linear-gradient(to bottom right, yellow, orange);                background: -webkit-linear-gradient(to bottom right, yellow, orange);                background: -moz-linear-gradient(to bottom right, yellow, orange);                background: -o-linear-gradient(to bottom right, yellow, orange);            }            25% {                background: linear-gradient(to bottom right, orange, yellow);                background: -webkit-linear-gradient(to bottom right, orange, yellow);                background: -moz-linear-gradient(to bottom right, orange, yellow);                background: -o-linear-gradient(to bottom right, orange, yellow);            }            50% {                background: linear-gradient(to bottom right, yellow, orange);                background: -webkit-linear-gradient(to bottom right, yellow, orange);                background: -moz-linear-gradient(to bottom right, yellow, orange);                background: -o-linear-gradient(to bottom right, yellow, orange);            }            75% {                background: linear-gradient(to bottom right, orange, yellow);                background: -webkit-linear-gradient(to bottom right, orange, yellow);                background: -moz-linear-gradient(to bottom right, orange, yellow);                background: -o-linear-gradient(to bottom right, orange, yellow);            }            100% {                background: linear-gradient(to bottom right, yellow, orange);                background: -webkit-linear-gradient(to bottom right, yellow, orange);                background: -moz-linear-gradient(to bottom right, yellow, orange);                background: -o-linear-gradient(to bottom right, yellow, orange);            }        }        @-moz-keyframes action-movie {            0% {                background: linear-gradient(to bottom right, yellow, orange);                background: -webkit-linear-gradient(to bottom right, yellow, orange);                background: -moz-linear-gradient(to bottom right, yellow, orange);                background: -o-linear-gradient(to bottom right, yellow, orange);            }            25% {                background: linear-gradient(to bottom right, orange, yellow);                background: -webkit-linear-gradient(to bottom right, orange, yellow);                background: -moz-linear-gradient(to bottom right, orange, yellow);                background: -o-linear-gradient(to bottom right, orange, yellow);            }            50% {                background: linear-gradient(to bottom right, yellow, orange);                background: -webkit-linear-gradient(to bottom right, yellow, orange);                background: -moz-linear-gradient(to bottom right, yellow, orange);                background: -o-linear-gradient(to bottom right, yellow, orange);            }            75% {                background: linear-gradient(to bottom right, orange, yellow);                background: -webkit-linear-gradient(to bottom right, orange, yellow);                background: -moz-linear-gradient(to bottom right, orange, yellow);                background: -o-linear-gradient(to bottom right, orange, yellow);            }            100% {                background: linear-gradient(to bottom right, yellow, orange);                background: -webkit-linear-gradient(to bottom right, yellow, orange);                background: -moz-linear-gradient(to bottom right, yellow, orange);                background: -o-linear-gradient(to bottom right, yellow, orange);            }        }        div #information:hover {            -webkit-animation: action-movie 5s;            -o-animation: action-movie 5s;            -moz-animation: action-movie 5s;            animation: action-movie 5s;        }        #operate {            text-align: center;            display: none;        }        #word {            font-size: xx-large;            text-shadow: 5px 10px 16px rgba(0, 0, 0, 0.3);         }    </style></head><body>    <div id="status">        <div id="information"></div>        <div id="detail">            <span id="word">Successfully.</span>        </div>    </div>    <div id="operate">        <button type="button" onclick="">click</button>    </div></body></html>

联系我