CSS3知识点

CSS3是CSS技术的一个版本，于2011年被广泛采用，它引入了许多新特性，如阴影、渐变、变换、动画等。以下是一些常见的CSS3知识点和相应的示例代码：

1. 阴影效果：

div {
  box-shadow: 5px 5px 10px #888888;
}

2. 圆角效果：

div {
  border-radius: 10px;
}

3. 渐变背景：

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

4. 2D转换：

div:hover {
  transform: rotate(360deg) scale(1.5);
}

5. 动画效果：

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}

6. 多列布局：

div {
  column-count: 3;
}

7. 用户界面样式：

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
}
 
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  background: #000;
}

这些是CSS3的一些基本特性，每个特性都可以通过不同的属性和值来实现各种各样的视觉效果。CSS3的学习需要时间和实践，但一旦掌握，你将能创建出令人惊叹的网页设计。