首页 > Web开发 > 详细

css3的新属性

时间:2017-02-18 10:41:07      阅读:157      评论:0      收藏:0      [点我收藏+]
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;---------------淡入淡出;
                                                                             
                             

css3的新属性

原文:http://www.cnblogs.com/cntt/p/6412285.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!