03-css3新特性

CSS3 的新增特性有很多,以下是其中的一些:

响应式布局 中的媒体查询(media query)和弹性盒子(flexbox)可以让创建响应式和灵活的布局。

媒体查询:

.container {

  max-width: 600px;

  margin: 0 auto;

}

@media (max-width: 600px) {

  .container {

    font-size: 36px;

  }

}

弹性盒子:

.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.item {

  flex: 1;

  padding: 20px;

  border: 1px solid #ccc;

}

渐变和阴影 中的渐变和阴影可以让元素具有更丰富的视觉效果。

渐变:

.gradient {

  background-color: lightblue;

  height: 100px;

  width: 100%;

}

.gradient2 {

  background-color: blue;

  height: 50%;

  width: 50%;

}

.gradient3 {

  background-color: red;

  height: 50%;

  width: 50%;

}

阴影:

.shadow {

  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

}

过渡和动画 中的 transition 和 animation 可以让元素具有更丰富的交互效果。

过渡:

动画:

.animate {

  animation: fadeInOut 0.5s ease forwards;

}

@keyframes fadeInOut {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

存储空间和响应式单位 中的 box-sizing 和 font-size 属性可以让元素具有更丰富的响应式特性。

box-sizing:

.container {

  max-width: 600px;

  margin: 0 auto;

}

.item {

  flex: 1;

  padding: 20px;

  border: 1px solid #ccc;

}

font-size:



.container {

  max-width: 600px;

  margin: 0 auto;

}

h1 {

  font-size: 32px;

}

这些是 CSS3 新增的一些特性,可以帮助创建更加灵活、响应式的网页。