CSS3新增？

文章目录

• 前言
• 一、CSS新增特性
  • 1.选择器
  • 2.弹性布局
  • 3.新样式
• 总结

---

一、CSS新增特性

1.选择器

• 兄弟选择器"~"：选择除了它以外它所有的弟弟。

• :last-child 获取最后一个子元素。注意：IE8不支持X:last-child。

• :nth-child(n) 获取某个元素的第n个子元素。关键字（even偶数、odd奇数）。

• :nth-last-child(n) 获取某个元素的最后第n个子元素。关键字（even偶数、odd奇数）。

• :first-of-type 选择特定元素的第一个子元素

• :last-of-type 选择特定元素的最后一个子元素

• :nth-of-type(n) 只计算父元素中指定的某种类型的子元素

• :nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取

• :only-child 匹配没有任何兄弟元素的元素

• :only-of-type 匹配同类型只有一个孩子的元素 

• 属性选择器：

[one*=val]	属性值里包含val字符并且在“任意”位置
[one^=val]	属性值里包含val字符并且在“开始”位置
[one$=val]	属性值里包含val字符并且在“结束”位置

2.弹性布局display: flex

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
主要使用容器(父元素)属性和项目(子元素)属性，依据主轴和交叉轴布局，
对一个容器中的子元素进行排列、对齐和分配空白空间。

容器属性： 
            flex-wrap: wrap;元素换行,自动均分垂直空间
            flex-wrap:nowrap; 不换行,默认属性
            flex-direction:row-reverse ; 反向换行
            flex-direction: column; 换列,改变主轴和交叉轴的方向
主轴方向分配位置关系: 行
             justify-content:content;文本水平居中对齐
             justify-content: space-between;两端对齐,间隔相等
             justify-content: space-around;包围,盒子两边都有间隔
             justify-content: flex-start;左对齐
             justify-content:flex-end;右对齐
交叉轴方向分配位置关系:列
             align-items: center; 垂直居中对齐
             align-items:flex-start; 上对齐
             align-items:flex-end; 下对齐
多行主轴:与flex-wrap: wrap;结合使用             
        align-content: center;(类似于 justify-content: space-around;)
        align-content: space-between;(类似于justify-content: space-between;)
        align-items:适用于单行/单行文本（单行主轴）
        align-conten:适用于多行文本（多行主轴,使用情况类似于justify-content）

多列布局 column-count: 5;

3.样式

color: rgba(255, 0, 0, 0.75);颜色透明度

text-stroke-color: red;文字装饰

border-radius:圆角边框

border-color:边框颜色

border-shadow:边框阴影

box-shadow:10px 10px 10px blue;阴影

box-reflect: below 2px;倒影

background:linear-gradient (red, green, blue);背景渐变

background-size:cover;contain;背景图片尺寸

2D/3D位置转换：translate(x,y)根据参数x(左侧)，y(顶部)从当前位置开始移动，不会影响其它元素，百分比是相对于自身元素，对行内标签没有效果 display: inline-block;

rotateX() 方法，围绕X轴旋转，从下往上

rotateY() 方法，围绕Y轴旋转，从右往左

rotate3d()方法，围绕X轴、Y轴、Z轴或者自定义轴旋转

            transform: translate(-10px, -10px);

           /* 面板(正数)放大、(小数)缩小，取决于宽度x轴和高度y轴的参数 */

            transform: scale(0.2, 0.3);

            /* 旋转，x轴和y轴倾斜的角度，参数为负为相反方向，skewX水平倾斜,skewY垂直倾斜 */

            transform: skew(30deg,0deg);

            /* 顺时针旋转，允许负值即逆时针 */

            /* transform:rotate(-50deg) ; */

            /* 透视perspective视距，近大远小，translateZ沿着Z轴移动，值不能>=视距的值*/

            /* transform:perspective(20px) translateZ(19px); */

过渡：放大收缩,从一种样式逐渐改变为另一种的效果

               transition:要过渡的属性 花费时间 运动曲线 何时开始;

动画："from" 和 "to"，从一种样式逐渐变化为另一种样式的效果，等同于 0% 和 100%

animation:change  2s infinite alternate;

/*  @keyframes是关键字不能更改*/

    @keyframes change{

        /* 百分比 */

        0%{

        top: 100px;

        }

        50%{

        top: 50px;

        };

        100%{

        top:0px

        }

    }

定义动画什么时候开始animation-delay 

循环次数animation-iteration-count

反向运动animation-direction:normal;reverse;alternate;交替反向alternate-reverse反向交替

animation-play-state:running;暂停paused;停止

媒体查询:最大宽度和最小宽度

@media screen and (max-width: 1440px) { }

@media screen and (min-width: 800px) {}

文本溢出text-overflow: ellipsis;

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了css的新增特性。