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;      // 列之间的宽度，样式和颜色规则
     }