CSS3的新特性

Posted pingzi-wq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3的新特性相关的知识,希望对你有一定的参考价值。

上一篇写了html5的新特性,不能落下CSS3独坐空房啊

HTML5新特性的链接:https://www.cnblogs.com/pingzi-wq/p/11490383.html

  1. 边框
    1. border-radius —— 圆角边框 
    2. box-shadow —— 边框阴影
    3. border-image —— 图片自定义边框
      // 圆角边框
      border-radius: 25px;
      
      // 边框阴影 四个参数:水平阴影位置,垂直阴影位置,模糊度 颜色
      box-shadow: 10px 10px 5px #f00
      
      
      // 图片边框
      border-image: url(image.jpg) 30 30 round | stretch
  2. 背景
    • background-size —— 规定背景图片的尺寸,在css3前背景图片的尺寸有图片实际尺寸决定。
    • background-origin —— 规定背景图片的定位区域,可以设置将背景图片放置于 content-box, padding-box, border-box 区域。
  3. 文字效果
    • text-shadow —— 文字阴影
    • word-wrap
      // 文字阴影
      h1 
        text-shadow: 5px 5px 5px #f00;      // X轴阴影偏移 Y轴阴影偏移 阴影大小 颜色  
      
      
      
      // 换行
      p 
        word-wrap: normal | break-word;       // 只在允许的断子点换行 | 在长单词或者 url 地址内部进行换行  
      
  4. 字体
    • @font-face
      // CSS3可以使得设计师可以使用任意喜欢的字体,不用必须使用已在用户计算机上安装好的字体
      
      @font-face 
          font-family: myFirstFont;
          src: url(),
          font-weight: bold;
       // 粗体字体
      
      div 
          font-family: myFirstFont;
         // 此时便使用了粗体字体
  5. 2D转换
    • translate()
    • rotate()
    • scale()
    • skew()
    • matrix()
      // 顺时针旋转给定度数
      div 
          transform: rotate(30deg);
      
      
      // 按 XY 轴的数据平移
      div 
          transform: translate(50px, 100px);  // X轴正方向移动 50px,Y轴正方向移动 100px
      
      
      // 元素扩大/缩小倍数
      div 
          transform: scale(2, 4); // 元素的宽扩大 2 倍,高扩大 5 倍
      
      
      // 元素反转给定的角度
      div 
          transform: skew(30deg, 20deg);  // 围绕 X 轴元素旋转30度,Y轴旋转20度
      
  6. 3D转换 —— 与2D的不相同就是 3D 有了一个 Z 轴
  7. 过渡 —— 可以在不使用 flash 动画或者 javascript 的前提下,当元素从一种样式变换为另一种样式时为元素添加效果
    // 过渡 宽从100px过渡到300px,用时2s
    div 
        transition: width 2s;
        width: 100px;
        height: 100px;
    
    
    div:hover 
        width: 300px;
    
  8. 动画 —— @keyframes规则
    @keyframes myfirst 
        0% background: red;
        25% background: yellow;
        50% background: blue;
        100% background: green;
    
  9. 多列
    • column-count —— 规定元素应该被分隔的列数
    • column-gap —— 规定列之间的间隔
    • column-rule —— 设置列之间的宽度、样式和颜色规则
      div 
          column-count: 3;     // 分成三列
          column-gap: 40px;     // 列之间间隔 40px
          column-rule: 3px outset #f00;      // 列之间的宽度,样式和颜色规则
      

       

以上是关于CSS3的新特性的主要内容,如果未能解决你的问题,请参考以下文章

CSS3的新特性

CSS3的新特性一

四十一CSS3的新特性(下)

h5 和css3 的新特性

CSS3的新特性,怪异盒子,CSS3过渡,进度条制作。

四十CSS3的新特性(中)