CSS3的新特性

Posted 2022-10-16 pingzi-wq

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