css3重点内容

CSS3作为最新的CSS标准，带来了许多新特性，让我们可以更加方便地开发出漂亮的网页。以下是一些CSS3的重点内容：

/* CSS3选择器 */

p:first-child { color: blue; }

a[href^="http"] { color: red; }

.myclass:hover { background-color: yellow; }


/* 盒子模型改进 */

div {
  Box-sizing: border-Box;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
}

/* 变形 */

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(50px,50px) rotate(45deg);
}

/* 过渡和动画 */

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s;
}

div:hover {
  transform: rotate(180deg);
}

div {
  animation: myanimation 2s infinite;
}

@keyframes myanimation {
  0% { transform: scale(1,1); }
  50% { transform: scale(1.5,1.5); }
  100% { transform: scale(1,1); }
}

/* 媒体查询 */

@media screen and (max-width: 600px) {
  body {
    background-color: yellow;
  }
}

/* 渐变 */

div {
  background: linear-gradient(red,yellow);
}

/* 阴影 */

div {
  Box-shadow: 10px 10px 5px grey;
}

/* 3D变换 */

div {
  transform: rotateX(30deg) rotateY(30deg) translateZ(100px);
}

这些CSS3的特性在今后的Web开发中将会越来越常见，学习并掌握这些内容将使我们的网页更加漂亮、更加交互效果更强、更加优秀。