CSS3渐变（Gradients）:

/* 线性渐变 */
.linear-gradient {
  background: linear-gradient(to right, red, yellow);
}
 
/* 径向渐变 */
.radial-gradient {
  background: radial-gradient(circle, red, yellow);
}

CSS3过渡（Transitions）:

/* 应用于所有元素的过渡效果 */
.transition-all {
  transition: all 0.5s ease-in-out;
}
 
/* 仅应用于背景颜色的过渡效果 */
.transition-background {
  transition: background-color 0.5s ease-in-out;
}

CSS3转换（Transforms）:

/* 2D转换：旋转45度 */
.rotate-45 {
  transform: rotate(45deg);
}
 
/* 2D转换：缩放1.5倍 */
.scale-150 {
  transform: scale(1.5);
}
 
/* 3D转换：旋转3D对象 */
.rotate-3d {
  transform: rotate3d(1, 1, 1, 45deg);
}

CSS3动画（Animations）:

/* 定义一个名为fadeIn的动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 应用动画效果到元素 */
.animate-fadeIn {
  animation: fadeIn 2s ease-in-out;
}

使用这些CSS3特性可以创建更加引人注目的网页设计。

/* 创建一个类来表示太极图的基本结构 */
.yin-yang {
  width: 100px; /* 太极图的宽度 */
  height: 100px; /* 太极图的高度 */
  background-color: #ffffff; /* 太极图的背景颜色 */
  border-radius: 50%; /* 让太极图显示为圆形 */
  position: relative; /* 相对定位，以便我们可以在其上放置阴阳 */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 内阴影增加立体感 */
}
 
/* 创建阴的样式 */
.yin-yang .yin {
  width: 50%; /* 阴的宽度为太极图宽度的一半 */
  height: 100%; /* 阴的高度为太极图的高度 */
  background-color: #000000; /* 阴的颜色为黑色 */
  border-radius: 50%; /* 圆形 */
  position: absolute; /* 绝对定位，以便我们可以控制其位置 */
  top: 0; /* 从顶部开始 */
  left: 0; /* 从左边开始 */
  transition: all 0.5s ease-in-out; /* 动画效果 */
}
 
/* 创建阳的样式 */
.yin-yang .yang {
  width: 50%; /* 阳的宽度为太极图宽度的一半 */
  height: 100%; /* 阳的高度为太极图的高度 */
  background-color: #ffffff; /* 阳的颜色为白色 */
  border-radius: 50%; /* 圆形 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 从顶部开始 */
  right: 0; /* 从右边开始 */
  transition: all 0.5s ease-in-out; /* 动画效果 */
}
 
/* 当鼠标悬停在太极图上时，阴阳发生变化 */
.yin-yang:hover .yin {
  left: 50%; /* 阴移动到中间 */
}
 
.yin-yang:hover .yang {
  width: 0%; /* 阳的宽度变为0，即消失 */
}

这段代码定义了一个简单的太极图结构，并且使用CSS伪类:hover实现了当鼠标悬停在太极图上时阴阳发生变化的交互效果。通过设置transition属性，我们为阴阳的变化增加了平滑的动画效果。这个示例展示了如何使用CSS创建交互式图形，并且是学习CSS动画和定位的一个很好的起点。

/* 定义基本样式 */
.tabs {
  position: relative;
  width: 100%;
  height: 400px;
  perspective: 1000px;
}
 
.tab {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #e1e1e1;
  transition: transform 0.5s;
  backface-visibility: hidden;
}
 
/* 定义第一个tab的样式 */
.tab-1 {
  transform-origin: bottom right;
  z-index: 2;
}
 
/* 定义第二个tab的样式 */
.tab-2 {
  transform: rotateY(-90deg);
  transform-origin: top left;
  z-index: 1;
}
 
/* 当选中第二个tab时，应用这个类 */
.tabs.tab-2-active .tab-1 {
  transform: rotateY(90deg);
}
 
/* 当选中第一个tab时，应用这个类 */
.tabs.tab-1-active .tab-2 {
  transform: rotateY(0);
}

上述CSS代码定义了一个容器.tabs和两个子元素.tab-1和.tab-2。通过改变.tabs的类来控制.tab的旋转，实现单边倾斜的效果。当点击第二个tab时，.tab-1会旋转90度，呈现出倾斜的效果。同理，点击第一个tab会让.tab-2旋转回0度。这个例子展示了如何使用CSS3的3D转换和类选择器来实现复杂的交互效果。

// 引入tram-one，它是一个小型的，模块化的库，可以用于创建和管理Web动画
import { css, transform, transition } from 'tram-one';
 
// 定义一个元素，并添加一个过渡效果
const element = document.createElement('div');
element.textContent = 'Hello, world!';
element.style.marginTop = '20px';
element.style.width = '100px';
element.style.height = '100px';
element.style.background = 'blue';
 
// 应用CSS样式和过渡效果
css(element, `
  transition: ${transition(transform, { duration: 2000 })}, background-color 1s;
  ${transform} : translateX(100px);
  background-color: red;
`);
 
// 触发过渡效果
setTimeout(() => {
  css(element, `${transform}: translateX(200px);`);
}, 1000);
 
// 在页面上显示元素
document.body.appendChild(element);

这段代码使用了tram-one库来创建一个具有过渡效果的元素。首先，创建了一个div元素，并对它应用了CSS样式和过渡效果。然后，通过setTimeout在指定的时间后触发了一个位置的变化，从而启动了定义好的过渡效果。最后，将元素添加到页面的body中进行显示。这个例子展示了如何使用tram-one库来简化CSS过渡的创建和管理。

CSS3是CSS（层叠样式表）的最新版本，于2011年被公布并推出，它包含许多新特性，如阴影、渐变、变换等。

1. 圆角：border-radius属性用于创建圆角。

div {
  border: 2px solid;
  border-radius: 50px; /* 或者可以用百分比 */
}

2. 阴影：box-shadow属性用于添加阴影。

div {
  box-shadow: 10px 10px 5px grey; /* 水平偏移 垂直偏移 模糊距离 颜色 */
}

3. 文字阴影：text-shadow属性用于在文字上添加阴影。

p {
  text-shadow: 2px 2px 2px grey;
}

4. 线性渐变：background-image属性与linear-gradient函数一起使用来创建线性渐变。

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

5. 旋转：transform属性的rotate函数用于旋转元素。

div {
  transform: rotate(45deg); /* 旋转45度 */
}

6. 自定义动画：使用@keyframes创建动画，并使用animation属性应用到元素上。

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

7. 多列布局：column-width和column-count属性用于创建多列布局。

div {
  column-width: 100px;
  column-count: 4;
}

8. 用户界面样式：CSS3提供了一些用于更改界面元素默认样式的属性，如resize、outline-offset等。

input {
  resize: none; /* 禁止调整输入字段的大小 */
  outline-offset: -2px; /* 移动轮廓线 */
}

9. 多背景：background-image属性可以接受多个图像值，从而创建多重背景。

div {
  background-image: url(image1.jpg), url(image2.jpg);
}

10. 渐进增强：一些新的CSS3特性可以让老版本的浏览器“逐步”增强体验，而不是一下子跳到全新体验，保障了向后兼容性。

以上是CSS3的一些基本知识点和示例，CSS3还有许多其他的特性和用法，需要开发者在实践中逐渐掌握。

CSS3的transition属性用于设置元素的过渡效果，让属性的变化过程变得平滑。

解法1：基本用法

div {
  transition: width 1s;
  -webkit-transition: width 1s; /* Safari */
}
 
div:hover {
  width: 200px;
}

在上面的例子中，当鼠标悬停在div元素上时，它的宽度会在1秒钟内从当前宽度平滑过渡到200像素。

解法2：设置多个属性的过渡效果

div {
  transition: width 1s, height 1s, transform 1s;
  -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，当鼠标悬停在div元素上时，它的宽度、高度和旋转效果会在1秒内从当前值平滑过渡到指定的值。

解法3：设置延迟时间

div {
  transition: width 1s, height 1s, transform 1s;
  transition-delay: 0.5s;
  -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
  -webkit-transition-delay: 0.5s; /* Safari */
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，过渡效果在元素值改变后0.5秒开始。

解法4：设置过渡的时间函数

div {
  transition: width 1s, height 1s, transform 1s;
  transition-timing-function: ease-in-out;
  -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
  -webkit-transition-timing-function: ease-in-out; /* Safari */
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，过渡效果使用"ease-in-out"时间函数，这意味着开始和结束时速度较慢，中间时速度较快。

解法5：设置过渡效果的持续时间

div {
  transition: width 1s, height 1s, transform 1s;
  transition-duration: 2s;
  -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
  -webkit-transition-duration: 2s; /* Safari */
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，过渡效果的持续时间被设置为2秒。

解法6：使用all代替具体属性

div {
  transition: all 1s;
  -webkit-transition: all 1s; /* Safari */
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，所有属性的变化都将有1秒的过渡效果。

CSS3 3D 转换允许你改变元素在三维空间中的位置或旋转。它们可以通过改变 translateX(x), translateY(y) 和 translateZ(z) 的值来移动元素，或者通过改变 rotateX(x), rotateY(y) 和 rotateZ(z) 的值来旋转元素。

以下是一些基本的 3D 转换的例子：

/* 移动元素 */
.element {
  transform: translateX(50px) translateY(100px) translateZ(50px);
}
 
/* 旋转元素 */
.element {
  transform: rotateX(45deg) rotateY(90deg) rotateZ(135deg);
}
 
/* 缩放元素 */
.element {
  transform: scaleX(1.5) scaleY(2) scaleZ(2);
}
 
/* 3D 转换的应用 */
.flip-card {
  perspective: 1000px; /* 创建3D效果 */
}
 
.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
 
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

这个例子展示了如何创建一个简单的翻转卡片效果，当鼠标悬停时卡片翻转。

CSS有三种主要的引入方式：

1. 外部样式表：使用<link>标签在HTML文件的<head>部分引入一个外部的CSS文件。

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

2. 内部样式表：在HTML文件的<head>部分使用<style>标签直接写CSS规则。

<head>
  <style>
    body {
      background-color: #f3f3f3;
    }
  </style>
</head>

3. 行内样式：直接在元素的style属性中写CSS规则。

<p style="color: blue;">这是一个蓝色的段落。</p>

这三种方式可以混合使用，服务于不同的场景和需求。通常，外部样式表用于大型项目，便于样式的管理和复用；内部样式表用于单页面的样式定义；行内样式主要用于临时的或者特定的样式改变，优先级最高，但不利于样式的复用和维护。

CSS盒子模型由四个部分组成：margin（外边距）、border（边框）、padding（内边距）和content（内容）。盒子的总尺寸是这四个部分的总和。

设置元素的宽度和高度通常是针对content设置的。如果设置了padding或border，实际渲染的盒子会变大，影响布局。

以下是CSS盒子模型各部分尺寸的计算公式：

• 元素的宽度：width + padding-left + padding-right + border-left + border-right
• 元素的高度：height + padding-top + padding-bottom + border-top + border-bottom

实例代码：

/* 设置元素的宽度和高度 */
.box {
  width: 300px;
  height: 200px;
  
  /* 内边距 */
  padding: 10px;
  
  /* 边框 */
  border: 5px solid black;
  
  /* 外边距 */
  margin: 20px;
}

在这个例子中，元素的实际渲染宽度将是 300px + 10px + 10px + 5px + 5px = 330px，高度将是 200px + 10px + 10px + 5px + 5px = 230px。

/* 设置一个盒子的背景、倒角和阴影 */
.box {
  background: linear-gradient(to right, #FF5252, #FF5252); /* 线性渐变背景 */
  border-radius: 20px; /* 盒子的边框倒角 */
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); /* 盒子的阴影 */
  width: 200px; /* 盒子的宽度 */
  height: 200px; /* 盒子的高度 */
  margin: 20px; /* 盒子的外边距 */
}

这段代码为一个类名为.box的元素设置了一个线性渐变背景、边框倒角以及盒子阴影。它展示了如何使用CSS3的渐变、边角圆角和盒子阴影来增强盒子的视觉效果。