zoukankan      html  css  js  c++  java
  • 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;---------------淡入淡出;
                                                                                 
                                 
  • 相关阅读:
    android学习十四(android的接收短信)
    C/C++知识要点4——printf函数以及cout的计算顺序
    HDU 5355 Cake(2015多校第六场,搜索 + 剪枝)
    微信错误提示code= -4/微信发送被拒绝
    struts2的validate在使用过程中的一个问题
    28.字符串的排列
    Redis入门经典——The Little Redis Book (翻译)
    POJ 3155 Hard Life(最大密度子图)
    BZOJ 1798 AHOI2009 Seq 维护序列 线段树
    RT-Thread开篇
  • 原文地址:https://www.cnblogs.com/cntt/p/6412285.html
Copyright © 2011-2022 走看看