CSS3内容知识

作者：System 时间：2024年08月19日分类：所有,css3 字数：1363

这篇文章距离上次修改已过229天，其中的内容可能已经有所变动。

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

阴影（Box Shadow 和 Text Shadow）

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

span {
  text-shadow: 2px 2px 2px #888888;
}

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

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

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

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

div {
  transform: translate(50px, 100px);
}

div {
  transform: rotate(30deg);
}

div {
  transform: scale(1.5, 1.5);
}

div {
  transform: skew(30deg, 20deg);
}

动画（创建动画效果）

@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 */
}

圆角（创建圆形元素）

div {
  border-radius: 25px;
}

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

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

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

/* 设置滚动条的宽度和颜色 */
::-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（可缩放矢量图形）等。

CSS3内容知识

评论已关闭

推荐阅读