CSS3知识点总结

CSS3

1. css3的重要模块

   • 选择器
   • 框模型
   • 背景和边框
   • 文本效果
   • 2D/3D转换
   • 动画
   • 多列布局
   • 用户界面

2. 多列布局

   • 多列属性
   属性 描述 column-count 规定元素应该被分割的列数 column-fill 规定如何填充列 column-gap 规定列之间的间隔 column-rule 设置所有column-rule-*属性的简写属性 column-rule-color 规定列之间规则的颜色 column-rule-style 规定列之间规则的样式 column-rule-width 规定列之间规则的宽度 column-span 规定原色应该横跨的列数 column-width 规定列的宽度 columns 规定设置column-width和column-count的简写属性。

   设置一段文本呈多少列显示，只要两个属性column-count和column-width
   例如：
   
<div style="column-count:2;">CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。</div>


   注：column-width属性控制列的宽度，如果没有提供column-count属性值，那么浏览器自主决定将文本分成合适的列数。

3. css3边框

   • 利用border-radius 可以创建圆角边框

 div{     border-radius:25px;  }

• 利用box-shadow用于向方框添加阴影利用box-shadow用于向方框添加阴影

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

  其中第一个参数是在水平方向上的偏移量（往右移为正），第二个参数在垂直方向上的偏移量（往下移为正），第三个是模糊半径，第四个为颜色。

• 利用border-image属性，使用图片创建边框

    div{      border-image:url()  30 30 round  }

  
  

文本属性

• 新增文本属性

  属性 描述 hanging-punctuation 标点符号是否位于线框之外 punctuation-trim 是否对标点符号进行修剪 text-align-last 如何对齐最后一行 text-emphasis 标记重点 text-justify 规定当text-align设置为”justify”时所使用的对齐方法 text-outline 规定文本的轮廓 text-overflow 当文本溢出时包含元素的效果 text-shadow 文本添加阴影 text-wrap 文本换行规则 word-break 规定非中日韩文本的换行规则 word-wrap 允许对长的单词进行分割并换行

• text-overflow :设定内容溢出状态下的文本处理方式。

  取值 （与over-flow:hidden属性结合使用以及white-space:nowrap 配合使用）

  • clip ：当文本溢出时不显示省略标记（…)，直接将溢出的部分裁剪掉。
  • ellopsis:文本溢出时显示省略标记（…).

• text-transform

  设定文本大小写等形式

  取值（默认是none):

  • capitalize: 每个单词第一个字母转换成大写字母
  • uppercase:转换成大写
  • lowercase:转换成小写

• text-shadow

  使用如下：

  p{     text-shadow:  5px  5px  5px  #88888   } 

 第一个参数是左右移动，第二个参数是上下移动，第三个参数是模糊半 径，第四个参数是阴影颜色。

• wrod-wrap

  溢出文本的处理方式

  取值：

  • mormal:默认值：允许内容顶开或溢出指定的容器边界
  • break-word: 内容在边界内换行，如果需要，单词内部允许断开。
    
    

Transform

参考https://www.w3cplus.com/content/css3-transform（转载）

属性参考http://www.w3school.com.cn/css3/css3_3dtransform.asp

这里讲的挺详细的。

• 2D转换方法

  • translate()，translateX(), translateY(),translateZ(),

    translate(x,y) 根据给定的x,y参数，元素从其当前位置移动，

  • rotate()

    rotate(30deg) 元素顺时针方向旋转给定的角度，例：顺时针方向旋转30度

  • scale(), scaleX(),scaleY(),

    scale(2,4) 根据给定的参数，元素按比例伸缩相应的比例，例：宽度变为原始宽度的2倍，高度变为原始高度的4倍。

  • skew(),skewX(),skewY()

    skew(30deg,20deg) 根据水平线（x轴）和垂直线(y轴)，元素翻转给定的角度，例：元素围绕x轴旋转30度，围绕y轴旋转20度。

  • matrix() 参数包含6值。

• 3D转换方法

  • rotateX(30deg),rotateY(),根据给定的角度围绕X轴或者Y轴旋转。
    
    

Transition

• transiton属性

  属性 描述 transition-property 规定应用过渡的css属性的名称 transition-duration 定义过渡效果的过渡时间，默认时间为0，所以没设置则看不到效果 transition-timing-function 规定过渡效果曲线，设定动画播放的方式，默认为“ease” transition-delay 规定动画播放时间延迟，默认为0

• 浏览器支持

  ​ CSS3 过渡 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

• transition的使用

  • 将效果添加到属性上，设置过渡时间

 div{ transition:width 2s//设置过渡属性和过渡时间。}

 div:hover{ width:300px;//设置最终属性值 }

• transition 多项改变可以一起，一项改变也可以简写如下：

 div{     ​      transition: width 2s ,height 2s, transform 2s;     ​      //也可以简写     ​     //  transition: width 1s linear 2s;`     }

Animation

animation 只应用在页面上已存在的DOM元素，且相对js和flash来说，绘制的东西相对比较粗糙。

• css3的animation属性

  属性 描述 @keyframes 规定动画 animation 所有动画属性的简写属性、除了animation-play-state属性 animation-name 规定@keyframes动画的名称 animation-duration 规定完成一个周期所花费的的时间，其使用方法与transiton-duration类似，默认为0。 animation-timing-function 规定动画的速度曲线，设定动画播放的方式。默认是”ease“ animation-delay 规定动画何时开始，默认是0. animation-iteration-count 规定动画被播放的次数，默认为1 animation-play-state 规定动画是否正在运行或暂停。默认是”running” animation-direction 规定动画是否在下一周期逆向播放。默认是“normal” animation-fill-mode 规定对象动画时间之外的状态

• 浏览器支持

  Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

• @keyframe规则使用

 @keyframe   animation_name{     ​//在这里设置一个周期的动态，从0到100%,from 和to默认为0到100%     ​     0%{  //在这里设置样式     ​      background:red;       }     50%{background:blue; }     ​100%{background:red;}    }

  接下来将keyframe与你要设置动画的模块关联起来

      div{       ​     animation: animation_name  5s;       ​     //可以在这里设置动画的一些属性，比如周期，是否delay等等       }