CSS的新功能

本文记录开发中和平时在网上看到的css的新特性和用法

display的gap属性

• gap: 10px; 横向纵向的间隙
• column-gap: 10px; 左右的间隙为10px;
• row-gap: 20px; 上下的间隙为20px;

.wrap {
  display:flex;
  flex-wrap: wrap;
  width: 300px;
  /* gap: 10px; */
  column-gap: 10px;
  row-gap: 20px;
}

.test {
  background-color: pink;
  width: 110px;
  height: 110px;
}

  <div class="wrap">
    <div class="test test1">1</div>
    <div class="test test2">2</div>
    <div class="test">3</div>
    <div class="test">4</div>
  </div>

设置的只是class为'test'的块元素之间的间隙，和父级元素之间没有

兼容性

在主流浏览器中兼容还算可以

css中的动画

• transition 过渡

• transform 转换

• animation 动画

使用 @keyframes 命名动画并定义其功能，然后使用 animation-name 将其应用于元素。 animation-duration 控制完成的时间等。

属性

.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(158, 166, 255, 1) 100%);
    animation: move 1s infinite; // 复合属性
}
@keyframes move {
    0% { top: -300px; }
    100% { top: 0; }
}

原生css自定义属性

当属性值要进行更改时，只需要在一个地方进行更改即可

:root { 
    --color: red;
}

.content1 {
    background: var(--color);
}
.content2 {
    background: var(--color);
}