css3的新属性

1.css的标准阴影
li:nth-child(1) shadow{
                      box-shadow  :2px           2px          5px      green;
------------------------     距离左边  距离顶边   模糊度  阴影颜色----------               
                                          -2px          -2px       5px        10px      green;
---------------------------距离右边   距离底边    模糊度     阴影扩展值四条边都会增加-------------
 
}        
    内阴影:
li:nth-child(2) shadow{
                                      box-shadow:inset 2px 2px 5px green;
}
 
 
2.文本阴影及一些文本样式;
         p{
             text-shadow:2px                   2px             6px        black;
                      距离左边的偏移  距离右边偏移  阴影模糊度  阴影颜色;
             word-break:break-all;整体打 断;
             word-wrap:break-word;文字打断;
             white-space:pre;-------空白换行,会被保留;
                               pre-line;------------------换个行被保留,但是行内空格不保留;
                               pre-wrap-----------------空白换行都会被保留,与pre相似;
                                no wrap------------- -----单行文本显示,所有文本都在一行显示,空格与换行都                     不会保留
 
颜色渐变:
                                 线性-渐变
background-image:linear-gradient(red,green,blue);
 
background-image:linear-gradient(0deg,red,orange);
                                                  ----水平----             
                                            --------------90deg  垂直的     45deg/135deg倾斜的-------------
background-image:linear-gradient(to right,yellow)
 
 
 
过渡属性:    .one{
                            transition-property:width,height;--------------要过渡的属性取值;
                            transition-duration:1s
                            transiton:all 1s;
                            }
                         
                      .one { 
                               transition-delay:1s;-------推迟一秒再过渡;
                               transution:width 1s------给宽设置的宽度一秒过渡;
                                opacity:0----------透明度0-1;
                              }
                          .one{
                                  transition-timing-function:linear;---------------线性效果,匀速;
                                                                              ease;---------------淡入浅出;
                                                                              ease-in;-----------------淡入
                                                                               ease-out ---------------淡出;
                                                                              ease-in-out;---------------淡入淡出;
                                                                             
                             
posted @ 2017-02-18 09:19  菜鸟婷婷  阅读(238)  评论(0编辑  收藏  举报