CSS3 盒模型之渐变与CSS3动画

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

在css、html中的标签元素大体分为三种不同的类型：块状元素、行内元素、和行内块状元素。

       常用的块状元素有（block）：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

       常用的行内元素有（inline）：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

       常用的行内块状元素有：<img>、<input>

特征：

块级元素 block：独占一行，可以任意设置宽高

行内元素 inline：宽高不可转换 

行内块级元素 inline-block:同时具备块级和行内元素的特点

• 改变无序列表

    /*序列去小圆点*/
    list-style: none;  //去掉小圆点
    list-style: upper-roman;    //在序列前增加罗马数字 
    list-style:lower-roman;     //在序列前英文罗马小写
    list-style: upper-alpha;    //英文大写A.B.C序列

• CSS盒子边框

     盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

    /*盒子边框样式*/
    border-top: 2px solid red;    //实线
    border-right: 2px dashed yellow;   //虚线
    border-left: 2px dotted blue;    //点线
    border-bottom: 4px double green;  //双实线
}

      border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。

• 添加渐变元素    linear-gradient 线性倾斜（渐变色）

     在HTML中定义一个<div closs="box”>，通过内联或者外联的方式赋予其样式

1.   制作一个背景为红色的圆：  border-radius
     

.box1{
     200px;
    height: 200px;
    background-color: red;
    /*圆*/
    border-radius: 100px;  //半径=直径的一半的圆形,其他圆形，可以更改属性值

     2.给盒模型元素添加阴影   box-shadow

.box{
             200px;
            height: 200px;
            background-color: red;
            /*盒模型元素阴影*/
            /* X Y 模糊 外延 颜色 */
            box-shadow:9px 5px 5px #000;
        }

      3.线性渐变色  ：颜色从上往下和从左往右   两种方式渐变

 .box{
             200px;
            height: 200px;/*线性渐变色，从上往下*/
            background: linear-gradient(red,yellow); //linear-gradient线性倾斜
        }

/*从左到右渐变 to right*/
            background: linear-gradient(to right,red,yellow);

   /*颜色位置转变,90deg是黄变红，-90deg是红变黄*/
    background: linear-gradient(-90deg,green,red);

     4.径向渐变（从中间扩散至周围）   background: radial-gradient

background: radial-gradient(red 10px,yellow 15px);

• 当鼠标移入时，图片转变 ： transition

.box1{
             100px;
            height: 100px;
            background-color: red;
            border-radius: 50px;
        }
        .box1:hover{
            background-color: aqua;
            transition: all linear 2s;     //all：全部  linear:匀速 2s：时间2秒
        }

        鼠标移入后：      

• CSS3动画：从一个样式逐渐变化为另一种样式的效果。（可以任意改变多的样式和次数）
•  animation属性   @Keyframesz规则

 @Keyframesz规则是创建动画 逐步将从前的样式更改为新的样式

  在创建动画时，把它绑定到一个选择器，规定动画的名称、 时长，否则动画不会有任何效果！

注：from to 等同于0%  100%（0%是动画的开始，100%时动画的完成）

.box1{
     100px;
    height: 100px;
    background-color: red;
    border-radius: 50px;
 /*在box中添加属性动画元素*/
    animation: mypicter 2s 5;  //5是循环的次数 ，infinite无线循环 mypicter自定义名称
}
/*动图元素循环值，在box大括号外面设置*/

 /*从红色 变成蓝色*/  from-to是一个整体

 @keyframes mypicter { 

　　　from{ background-color: red; }
　　　 to{ background-color: blue; }
}