CSS3知识点总结

文章来源:华科小宝   作者:赵苗     发布时间:2020-12-30 04:30    浏览量:

1.background-origin: 规定背景图片的定位区域

1.png

2.background-clip: 规定背景的绘制区域

2.png

3.background-size: 规定背景图片的尺寸

3.png

4.边框、阴影

4.png

5.CSS3新特性之选择器

1)属性选择器5.png

2)结构伪类选择器

6.png

备注:n 的取值大于等于0
      n 可以设置预定义的值
            odd[选中奇数位置的元素]  
            even【选中偶数位置的元素】

      n 可以是一个表达式:
             an+b的格式

3)其他选择器:

7.png

6.渐变

8.png

备注:线性渐变:
         1. 开始颜色和结束颜色
         2. 渐变的方向
         3. 渐变的范围

       background-image:  linear-gradient(
                to right,
                red,
                blue
        );
         表示方向:
             1. to + right | top | bottom | left 
             2. 通过角度表示一个方向
               0deg [从下向上渐变] 
               90deg【从左向右】

       /* 径向渐变 */
            background-image: radial-gradient(
                 100px at center,
                 red,
                 blue
            );

7.2D转换、3D转换 transform

9.png

备注: perspective:透视,transform-style:preserve-3d 将平面图形转换为立体图形

8.过渡 transition

10.png

备注:参考https://www.cnblogs.com/afighter/p/5731293.html

9.动画 animation

111.png

10.CSS3新特性之网页布局

12.png

甘肃华科信息技术有限责任公司    版权所有    甘公网安备 62010202001329