CSS3内容知识

CSS3是CSS（层叠样式表）的一个版本，引入了许多新特性，包括更强大的选择器、阴影、渐变、变换等。以下是一些CSS3的内容知识点：

1. 阴影（Box Shadow 和 Text Shadow）

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

2. 渐变（线性渐变和径向渐变）

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

3. 变换（位置变换、旋转、缩放、倾斜）

div {
  transform: translate(50px, 100px);
}
 
div {
  transform: rotate(30deg);
}
 
div {
  transform: scale(1.5, 1.5);
}
 
div {
  transform: skew(30deg, 20deg);
}

4. 动画（创建动画效果）

@keyframes mymove {
  from {top:0px;}
  to {top:200px;}
}
 
@-webkit-keyframes mymove /* Safari 与 Chrome */
{
  from {top:0px;}
  to {top:200px;}
}
 
div {
  animation: mymove 5s infinite;
  -webkit-animation: mymove 5s infinite; /* Safari 与 Chrome */
}

5. 圆角（创建圆形元素）

div {
  border-radius: 25px;
}

6. 多列布局（实现文本的多列显示）

div {
  column-count: 3;
  column-gap: 20px;
}

7. 用户界面（更改滚动条样式）

/* 设置滚动条的宽度和颜色 */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这些是CSS3的一些基本特性，CSS3还有许多其他的特性，如过渡、3D变换、4. 画布（Canvas）和 5. SVG（可缩放矢量图形）等。