CSS3相关内容

CSS3边框：

　　1、圆角边框：
       
         div

              {
                border:2px solid;
                border-radius:25px;
               -moz-border-radius:25px; /* Old Firefox */
        }

      2、边框阴影：

            div
                {
                box-shadow: 10px 10px 5px #888888;
                }

CSS3背景：

    1、background-size属性：

        {background:url(../i/bg_flower.gif);
        background-size:63px 100px;}

    2、background-clip：

        div
        {
        background-color:yellow;
        background-clip:content-box;
        }

    3、background-origin:
        {
        background-image:url();
        background-repeat:no-repeat;
        background-position:left;
        background-origin:content-box;
        }

文字效果：

    1、文本阴影：
        {
        text-shadow: 5px 5px 5px #FF0000;
        }

    2、自动换行：
        p {word-wrap:break-word;}

CSS3 2D转换：

    transform:rotate/translate/scale/skew/matrix

CSS3 3D转换：

    div
    {
    transform: rotateX/Y(120deg);
    }
         

过渡：

 

　　过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

 

      1、规定希望把效果添加到哪个 CSS 属性上 
      2、规定效果的时长 

   　　 div
   　　 {
   　　 transition: width 2s;
    　　}
　　　　如果时长未规定，则不会有过渡效果，因为默认值是 0。

　　　　规定当鼠标指针悬浮于<div>元素上时：

   　　 div:hover
   　　 {
  　　  width:300px;
   　　 }

CSS3 动画：

    在 @keyframes 中创建动画时，要把它捆绑到某个选择器，否则不会产生动画效果。

     1、规定动画的名称 
     2、规定动画的时长 

　　捆绑到 div 元素，时长：5 秒：

    div
    {
    animation: myfirst 5s;
    }

转载于:https://www.cnblogs.com/qingshixiaodao/p/5326751.html